CSS Grid

The Moment I Stopped Hating CSS

(so much)

Nikita Malyschkin

@nmalyschkin

Nikita Malyschkin

web developer by day

philosopher when drunk

 

Javascript / Python / C++ / more

 

Twitter / GitHub / Telegram

@nmalyschkin

I HATE CSS!

CSS Grid

new way to position element with CSS 

Why do we need another way to position elements?

designing a layout
≠
implementing a layout

CSS Grid
Concept

CSS Grid
Basic Syntax

We differentiate:
- grid

- items

<div class="grid">
  <div class="item1" />
  <div class="item2" />
</div>
.grid {
  display: grid;
  










}
.grid {
  display: grid;
  
  grid-template-columns: 1fr 100px 10% 2fr;
  grid-template-rows: 50px auto;








}
.grid {
  display: grid;
  
  grid-template-columns: 1fr 100px 10% 2fr;
  grid-template-rows: 50px auto;
  
  grid-column-gap: 10px;
  grid-row-gap: 15px;





}
.grid {
  display: grid;
  
  grid-template-columns: 1fr 100px 10% 2fr;
  grid-template-rows: 50px auto;
  
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  
  grid-template-areas:
    "logo header . rightBar"
    "logo main main rightBar"

}
.item {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.item {  
  grid-column: 2 / 3;
  
  grid-row: 1 / 3;

}
.item {
  grid-column: 2 / span 1;
  
  grid-row: 1 / span 2;

}
.item {
  grid-area: header;



}

time to code!

Main layout

Let's implement!

.grid {
  display: grid;
  
  grid-template-rows: 80px 80px 1fr 80px;
  grid-template-columns: 240px 1fr 200px;
  grid-template-areas:
    "logo header header"
    "logo main main"
    "menu main main"
    "menu footer footer"
}

.main {
  grid-area: main;
}

.toggleBar {
  grid-column: 3 / span 1;
  grid-row: 2 / span 3;
}

CSS Grid
Advanced Syntax

CSS Grid
implicit rows and columns

.grid {
  display: grid;
  
  grid-template-columns: 1fr 100px 10% 2fr;
  grid-template-rows: 50px auto;




}










.grid {
  display: grid;
  
  grid-template-columns: 1fr 100px 10% 2fr;
  grid-template-rows: 50px auto;
  
  grid-template-areas:
    "logo header . rightBar"
    "logo main main rightBar"
}










.grid {
  display: grid;
  
  grid-template-columns: 1fr 100px 10% 2fr;
  grid-template-rows: 50px auto;
  
  grid-template-areas:
    "logo header . rightBar"
    "logo main main rightBar"
}

.header {
  grid-area: header;
}

.logo {
  grid-area: logo;
}

/* [...] */

CSS Grid
item alignment

.grid {
  display: grid;
  
  grid-template: 1fr 2fr / 50px auto;
  
  align-items: center; /* aligns vertically */
  justify-items: end; /* aligns horizontally */
}

.special_item {
  /* aligns vertically, overwrites grid settings */
  align-self: stretch;
}

CSS Grid
special length functions

.grid {
  display: grid;
  
  grid-template: 1fr 2fr / 1fr 1fr 1fr 1fr;
}

.grid {
  display: grid;
  
  grid-template: 1fr 2fr / repeat(4, 1fr);
}

.grid {
  display: grid;
  
  grid-template: 1fr 2fr / repeat(4, minmax(250px, 1fr));
}

.grid {
  display: grid;
  
  grid-template: 1fr 2fr / repeat(auto-fill, minmax(250px, 1fr));
}

Element Grid

.grid {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, 150px);
  place-items: center;
  align-content: baseline;
  justify-content: space-around;
  gap: 20px;
}

CSS Grid is great for

  • main layouts
  • component layout
  • element grids

CSS Grid Cheat Sheet

( grid.malven.co )

Try it out!
It's fun!

​position:
  absolute
​display: flexbox
HTML Table
float: right
position:
  fixed

Programming with CSS Grid

overflow issues
Made with Slides.com