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
120
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
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
190
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
150
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
700
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
The Mythical Team-Month
searls
217
43k
Thoughts on Productivity
jonyablonski
64
4.1k
Docker and Python
trallard
37
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
How to train your dragon (web standard)
notwaldorf
79
5.5k
How GitHub (no longer) Works
holman
305
140k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Six Lessons from altMBA
skipperchong
24
3.2k
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