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
110
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
51
Get start with react-test-library.
simoneas02
0
35
ES6 and Beyond pdf
simoneas02
0
140
Montando layouts em um mini game
simoneas02
2
230
Experiência na China Simone e Willany pareando <3
simoneas02
0
62
Front-end na vida real
simoneas02
0
200
It's me!!
simoneas02
0
78
Montando layouts em um mini game chamado Browser
simoneas02
1
170
It's me!!
simoneas02
0
170
Other Decks in Technology
See All in Technology
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
380
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
920
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
250
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
140
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
350
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
アクセス制御にまつわる改善 / Improving access control
itkq
0
540
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
250
JSON攻略法.pdf
miyakemito
8
5.1k
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
データベース02: データベースの概念
trycycle
0
160
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
How STYLIGHT went responsive
nonsquared
92
4.8k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Web Components: a chance to create the future
zenorocha
305
41k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Product Roadmaps are Hard
iamctodd
44
9.7k
A designer walks into a library…
pauljervisheath
200
23k
How to Ace a Technical Interview
jacobian
272
22k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
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