Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Das Tabelas ao Grid CSS
Search
Simone Amorim
April 29, 2017
Technology
0
140
Das Tabelas ao Grid CSS
A evolução de criação de layouts das tabelas ao Grid CSS
Simone Amorim
April 29, 2017
Tweet
Share
More Decks by Simone Amorim
See All by Simone Amorim
A Inclusão de Mulheres no Mercado de Tecnologia
simoneas02
0
57
Get start with react-test-library.
simoneas02
0
51
ES6 and Beyond pdf
simoneas02
0
170
Montando layouts em um mini game
simoneas02
2
240
Experiência na China Simone e Willany pareando <3
simoneas02
0
75
Front-end na vida real
simoneas02
0
210
It's me!!
simoneas02
0
94
Montando layouts em um mini game chamado Browser
simoneas02
1
190
It's me!!
simoneas02
0
250
Other Decks in Technology
See All in Technology
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
Apache Spark もくもく会
taka_aki
0
140
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
メルカリIBISの紹介
0gm
0
210
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.2k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
Modern Linux
oracle4engineer
PRO
0
160
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
130
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
1.6k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Embracing the Ebb and Flow
colly
87
4.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Visualization
eitanlees
148
16k
Navigating Team Friction
lara
189
15k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Why Our Code Smells
bkeepers
PRO
339
57k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
Born 01/01/17
CSS GRID LAYOUT グリッドレイアウト
Simone Amorim Mother, WWcode Leader and studying for become a
Front-End Developer and CSS Evangelist <3 I love running and ride a bike! @samorim02 @simoneas02 simoneas02.github.io
CSS LAYOUTS ONTEM 昨日のCSSレイアウト
<table> <td></td> </table> Table
Table .box { display: inline-block; } inline
Table inline .box { float: left; } Float
Table inline Float .container { display: flex; } Flex
Grid Layout?
Biblioteca ou framework?
Um modulo CSS3 que define um grid otimizado para interfaces
CSS GRID LAYOUT CSS Grid Layout Module Level 1 w3.org/TR/css3-grid-layout/
Grid Layout x Flexbox
FLEXBOX Layouts unidimensionais w3.org/TR/css-flexbox-1/
GRID LAYOUT w3.org/TR/css3-grid-layout/ Layouts bidimensionais
TERMINOLOGiA 用語
GRID LINES As linhas que dividem o grid.
GRID TRACK É o termo genérico para o espaço entre
duas grid lines, verticais ou horizontais.
GRID CELLS Também conhecida como grid item. É o espaçamento
entre duas line grids verticais e duas horizontais.
GRID AREA Um ou mais grid items (grid cells)
CODE コード
HTML <div class=“grid-container”> </div> <div class=“grid-item a”>A</div> <div class=“grid-item b”>B</div>
<div class=“grid-item f”>F</div> <div class=“grid-item e”>E</div> <div class=“grid-item d”>D</div> <div class=“grid-item c”>C</div>
DEFININDO UM GRID GRIDの定義
.grid-container { display: grid; } .grid- container { display: inline-grid;
}
LINE-BASE PLACEMENT ラインベース配置
A B C D E F 1 column 2 column
3 column 2 row 1 row 3 row .grid-container { display: grid; } grid-template-rows: 100px 100px; grid-template-columns: 120px 120px 120px; 100px;
LINE-BASE POSITIONING ラインベース位置決め
.a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end:
2; .f { } grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; B C D A E F
SHORTHANDS ショーランズ
.a { } grid-column: 1 / 2; grid-row: 1 /
2; .a { } grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; .a { } grid-area: 1 / 1 / 2 / 2; B C D A E F
GRID GAP グリッドギャップ
… … grid-row-gap: 10px; grid-column-gap: 10px; … … grid-gap: 10px;
AREA NAMING エリア名
.a {grid-area: header;} .b {grid-area: aside;} .c {grid-area: main;} .d
{grid-area: footer;} .container { display: grid; grid-template-rows: auto; grid-template-columns: auto; grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; } main header content aside footer .e {grid-area: content;}
RESPONSIVE WEB DESIGN レスポンシブウェブデザイン
main header content aside footer @media screen and (max-width: 666px)
{ } … grid-template-areas: “header header header” “aside main main” “aside content content” “footer footer footer”; … .container { grid-template-areas: “aside header header” “aside main main” “aside main main” “content footer footer”; } main header content aside footer
MAIS もっと
caniuse.com/#feat=css-grid SUPORTE Parcial / prefixo -ms Soportado
QUER SABER MAIS github.com/simoneas02/awesome-grid-layout A curated list of CSS Grid
Layout Module or only Css Grid もっと知りたいです
bit.ly/aprendendo-grid-layout
Freedom 03/04/17
“Não importa ser Front-end, Desiger, Back-end.. O importante é amar
o que você faz! Dinheiro e reconhecimento são apenas uma consequência” by Bernard de Luna
None