ŚWIAT ZZA KRAT
CSS GRID
MACIEK KORSAN, BIAŁYSTOK 2017
Maciek Korsan
Frontend developer @ POLARBITS
Maciek @ Korsan Studio
Wykładowca @ Studia Podyplomowe WI PB
@maciejkorsan
CSS Grid layout has been designed to provide a two-dimensional layout method for CSS, with the ability to lay out items in rows and columns.
Flexible layout - 1D - tylko oś X (lub Y)
Grid layout - 2D - osie X i Y
header
menu
content
footer
<center>
<table width="1000px" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="black">
<td colspan="2">
<center>
<br/><br/><font color="white">Header</font><br/><br/><br/>
</center>
</td>
</tr>
<tr>
<td width="25%" bgcolor="blue">
<center>
<font color="white">Menu</font><br/>
</center>
</td>
<td width="75%" bgcolor="green">
<center>
<font color="white">Content</font><br/>
<font color="white">Content</font><br/>
<font color="white">Content</font><br/>
<font color="white">Content</font><br/>
</center>
</td>
</tr>
<tr>
<td bgcolor="red" colspan="2">
<center>
<br/><font color="white">Footer</font><br/><br/>
</center>
</td>
</tr>
</table>
</center>Like tables, grid layout enables an author to align elements into columns and rows. However, unlike tables, grid layout doesn’t have content structure, therefore enabling a wide variety of layouts not possible in tables.
display: grid;
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
} <div class="wrapper">
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
<div class="box">d</div>
<div class="box">e</div>
<div class="box">f</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
} <div class="wrapper">
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
<div class="box">d</div>
<div class="box">e</div>
<div class="box">f</div>
</div>
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
} <div class="wrapper">
<div class="box">a</div>
<div class="box">b<br/><br/><br/></div>
<div class="box">c</div>
<div class="box">d</div>
<div class="box">e</div>
<div class="box">f</div>
</div>
System współrzędnych
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 3;System współrzędnych - nakładanie się
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 3;grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;System współrzędnych - tetris?
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 3;grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;.wrapper {
display: grid;
grid-template-columns: 100px 600px;
grid-template-areas: "logo stats"
"score stats"
"board board"
"... controls";
}
.logo { grid-area: logo; }
.score { grid-area: score; }
.stats { grid-area: stats; }
.board { grid-area: board; }
.controls { grid-area: controls; }<div class="wrapper">
<div class="logo">logo</div>
<div class="score">score</div>
<div class="stats">stats</div>
<div class="board">board</div>
<div class="controls">controls</div>
</div>
grid-area
można używać z @media!
.grid {
display: grid;
width: 750px;
grid-template-columns: 150px 1fr 2fr;
}Jednostka FR
Dzięki za uwagę!
@maciejkorsan
więcej o CSS grid: https://tympanus.net/codrops/css_reference/grid/
Świat zza krat
By Maciej Korsan
