CSS Grid Layout

CSS Grid Layout

(aka "Grid")

is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

Basics
and
Browser Support

To get started

  • to define with display: grid;
  • set column size with grid-template-columns
  • set row size with grid-template-rows
  • place child elements with grid-column and grid-row
Browser Support

Important Terminology

Grid Container

the element on which display: grid is applied

Grid item

the children of the grid container

Grid Line

the dividing lines that make up the structure of the grid grid line

Grid Track

the space between two adjacent grid lines grid line

Grid Cell

the space between two
adjacent row and two adjacent column grid lines grid line

Grid Area

the total space surrounded by four grid lines grid line

Properties for the Grid Container

Display


.container {
  display: grid | inline-grid;
}

Grid-template-columns and
grid-template-rows


.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
					

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}
fr unit 

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Grid-template-areas


.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

grid-template

						
.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}
						
					

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

grid-column-gap and
grid-row-gap


.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
grid gap

grid-gap


.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

justify-items


.container {
  justify-items: start | end | center | stretch;
}
justify-items

align-items


.container {
  align-items: start | end | center | stretch;
}
align-items

justify-content


.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}
justify content 1 justify content 2

align-content


.container {
	align-content: start | end | center | stretch | space-around | space-between | space-evenly;	
}
align content 1 align content 2

grid-auto-columns and
grid-auto-rows

						
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

grid-auto-flow

						
.container {
  grid-auto-flow: row | column | row dense | column dense;
}

grid

						
.container {
	grid-template-rows: 100px 300px;
	grid-auto-flow: column;
	grid-auto-columns: 200px;
}
						
					
						
.container {
  grid: 100px 300px / auto-flow 200px;
}

Properties for the
grid-items

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

						
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
Example
						
.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}
Example of grid-column and grid-row

grid-column and grid-row

						
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

grid-area

						
.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

justify-self and align-self

							
.item {
	justify-self: start | end | center | stretch;
}
							
						
							
.item {
  align-self: start | end | center | stretch;
}
justify-self align-self

place-self

						
.item-a {
  place-self: center;
}

Example

						


  
Header

  
Menu

  
Main
  
  
Right

  
Footer



						
					
						
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
						
					
							
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
grid example

thanks for attention!

Mem :)