@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>
*/

https://codepen.io/AleksejDix/pen/MVYPOR

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

https://codepen.io/AleksejDix/pen/EEaMjg

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

https://codepen.io/AleksejDix/pen/OvPqXr​

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

https://codepen.io/AleksejDix/pen/ZxYPvp

@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

https://sii.im/playground/css-grid/#/

@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!

 Aleksej Dix

 Front End Developer

@aleksejdix

aleksej.dix@oddeven.ch

https://oddeven.ch

CSS GRID

By oddEVEN

CSS GRID

  • 1,599

More from oddEVEN