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
130
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
52
Get start with react-test-library.
simoneas02
0
37
ES6 and Beyond pdf
simoneas02
0
150
Montando layouts em um mini game
simoneas02
2
240
Experiência na China Simone e Willany pareando <3
simoneas02
0
66
Front-end na vida real
simoneas02
0
200
It's me!!
simoneas02
0
82
Montando layouts em um mini game chamado Browser
simoneas02
1
170
It's me!!
simoneas02
0
200
Other Decks in Technology
See All in Technology
フルカイテン株式会社 採用資料
fullkaiten
0
32k
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
330
PDF Viewer作成の今までとこれから
hunachi
0
480
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
120
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
390
AI前提のサービス運用ってなんだろう?
ryuichi1208
2
690
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
200
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
620
Fediverse Discovery Providers overview
andypiper
0
170
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
240
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
180
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Web development in the modern age
philhawksworth
205
10k
The Invisible Side of Design
smashingmag
296
50k
For a Future-Friendly Web
brad_frost
174
9.3k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Designing for humans not robots
tammielis
248
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Web Components: a chance to create the future
zenorocha
309
42k
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