@aleksejdix
G
R
I
D
Y
O
U
O
?
D
@aleksejdix
@aleksejdix
WE
ARE
HIRING
@aleksejdix
O
R
Y
D
R
I
G
H
I
S
T
FRAMES
TABLES
@aleksejdix
@aleksejdix
FIRST CSS
FRAMEWORKS
2008
FIRST CSS
FLOAT GRID
2010
@aleksejdix
@aleksejdix
2010
DISPLAY
FLOAT
INLINE-BLOCK
LEFT, RIGHT
TEXT
ALIGN
JUSTIFY
LEFT, RIGHT
li {
display: inline-block;
width: 100%;
}
@media (min-width: 640px){li {width: 50%}}
@media (min-width: 960px){li {width: calc(100%/3)}}
@media (min-width: 1280px){li {width: 25%}}
/*
<ul class="grid"><li></li><li></li><li></li><li></li><li></li></ul>
*/
display: inline block
.clearfix:after{
content: '';
display: block;
clear: both;
}
li {
float: left;
width: 100%;
}
@media (min-width: 640px){ li { width: 50% }}
@media (min-width: 960px){ li { width: calc(100% / 3)}}
@media (min-width: 1280px){ li { width: 25%}}
/*
<ul class="grid">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
*/float:left with clearfix
2012
DISPLAY
flex
INLINE-FLEX
BOX
Alignment
module
.grid {
display: flex;
flex-wrap: wrap;
}
li {
width: 100%;
}
@media (min-width: 640px){ li { width: 50% }}
@media (min-width: 960px){ li { width: calc(100% / 3)}}
@media (min-width: 1280px){ li { width: 25%}}
/*
<ul class="grid">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
*/
display: flex + box alignment
2017
DISPLAY
grid
inline-grid
BOX
Alignment
module
???
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/*
<ul class="grid">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
*/
display: GRID
@aleksejdix
G
R
I
D
I
S
H
?
W
A
T
A network of lines that cross each other to form a series of squares or rectangles.
credits: https://codyhouse.co/web-components
L
E
X
V
S
R
F
G
I
D
FLEXBOX
OR
CSS GRID
AND
O
L
O
G
I
N
E
Y
T
R
M
Lines
Lines
GRID
enclosed area with all cells and lines
GRID CELL
smallest area between 4 lines
cell or item
TRACK
Row
column
vertical or horizontal area between 2 lines
AREA
rectangular area between 4 lines
nav
header
main
aside
footer
Designed by Thomas Gaskin. Creative direction by Hugh Dubberly. Algorithms by Patrick Kessler.
Patent belongs to William Drenttel + Jessica Helfand.
DEMO
@aleksejdix
N
O
W
I
U
A
?
C
N
S
E
EVERGREEN BROWSERS
03.
2017
EDGE UPDATE
10.
2017
IE 10+
SUPPORT
WITH LESS
FEATURES
@aleksejdix
I
T
E
L
A
R
N
learncssgrid.com
css-tricks.com
cssgrid.io
gridbyexample.com
scrimba.com
@aleksejdix
AND MORE IN
WEBZUERI.CH SLACK
LEARNING CHANNEL
THANKS!
