CSS grid

Made with ♡ by Antonija Šimić

▪️▪️

What is it?

CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web.

- Codrops

▪️▪️

Why do we need it?

dynamic code
more control over the grid
floats and tables were not made for grid

.wannabe-grid {
  display: table;
}

.wannabe-grid-children {
  display: table-cell;
}

.wannabe-v2-grid {
  float: left;
  width: 33.33333%;
}

▪️▪️

How to use it?

By setting (at least) these properties to the container

display property
grid-template-columns
grid-template-rows

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 50px 50px;
}

▪️▪️

Grid container

Sets the number of rows and columns
grid-template-columns, grid-template-rows

Grid column

Sets the placement of grid items controlled by CSS properties
grid-column-start, grid-column-end and many others

Two components of every grid

▪️▪️

Properties for the grid container

▪️▪️

Display property

.grid-container {
  display: grid;
}

👉 https://codepen.io/tonkec/pen/MLyqPK

Inspector recognizes the grid

▪️▪️

grid-template-columns

sets the size of the columns
space separated list
units (px), fractions, percentage

Example on the next slide 👉

▪️▪️

grid-template-rows

sets the size of the rows
space separated list
units (px), fractions, percentage

👉 https://codepen.io/tonkec/pen/VgjjeZ

▪️▪️

Properties for the grid columns

▪️▪️

How to count columns and rows?

grid-column-start
grid-column-end
grid-row-start
grid-row-end

- Codrops

▪️▪️

grid-column-start

sets the start position for a grid item within a column
span | integer

👉 https://codepen.io/tonkec/pen/pGbbyp

▪️▪️

grid-column-end

sets the end position for a grid item within a column
span | integer

👉 https://codepen.io/tonkec/pen/YBWWpP

▪️▪️

grid-row-start

sets the start position for a grid item within the row
span | integer

👉 https://codepen.io/tonkec/pen/bzeeRR

▪️▪️

grid-row-end

sets the end position for a grid item within the row
span | integer

👉 https://codepen.io/tonkec/pen/LqZZzP

▪️▪️

Shorthand

.item {
  grid-column: 4 / 5; 
  /* grid-column-start grid-column-end */
  grid-row: 2 / 3;
  /* grid-row-start grid-row-end */
}

...and back to properties for the grid container

▪️▪️

grid-row-gap

sets the size of the gap between rows
unit

Example on the next slide 👉

▪️▪️

grid-column-gap

sets the size of the gap between columns
unit

👉 https://codepen.io/tonkec/pen/pGbbdV

▪️▪️

Explicit grid

defined by grid-template-rows, grid-template-columns

Implicit grid

browser will assume the size of the columns

▪️▪️

👉 https://codepen.io/tonkec/pen/jdrYdg

https://codepen.io/collection/AzMKkR/

Examples from every slide can be found here

👇

Browser support

👉 https://caniuse.com/#search=grid

▪️▪️

Explore

http://cssgridgarden.com/
https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228
https://tympanus.net/codrops/css_reference/grid/#section_grid-inspector-tool
https://bitsofco.de/how-the-minmax-function-works/

▪️▪️

How to code a responsive grid?

👩‍💻

👉 https://codepen.io/tonkec/pen/XOKMzm

▪️▪️

Kveščns?

🙄

▪️▪️

Who wants to speak on the next meetup?

▪️▪️

Thank you for your attention

🙌

▪️▪️

CSS grid

What is it?

Why do we need it?

How to use it?

Grid container

Grid column

Two components of every grid

Properties for the grid container

Display property

grid-template-columns

grid-template-rows

Properties for the grid columns

How to count columns and rows?

grid-column-start

grid-column-end

grid-row-start

grid-row-end

Shorthand

...and back to properties for the grid container

grid-row-gap

grid-column-gap

Explicit grid

Implicit grid

https://codepen.io/collection/AzMKkR/

Examples from every slide can be found here

👇

Browser support

Explore

How to code ​a responsive grid?

Kveščns?

🙄

Who wants to speak on the next meetup?

Thank you for your attention

🙌

How to code a responsive grid?