CSS Grid Layout

created by Sergey Lyakhov

What is Grid?

grid-vs-flexbox

Basic terms

grid container

grid element

grid line

grid-line

grid cell

grid-cell

grid track

grid-track

grid area grid-area

Grid Container Properties

display


						.container {
							display: grid;
						}
					

						.container {
							display: inline-grid;
						}

grid-template-columns

grid-template-rows


							.container {
								display: grid;
								grid-template-columns: 40px auto 40%;
								grid-template-rows: 250px 5vw 15rem;
							}
grid-area

repeat()


						.container {
							display: grid;
							grid-template-columns: repeat(3, 250px);
						}

fr (fraction)


						.container {
							display: grid;
							grid-template-columns: repeat(3, 1fr);
						}
					

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

grid-auto-columns

grid-auto-rows


							.container {
								display: grid;
								grid-template-rows: 50px 150px;
								grid-auto-rows: 15px;
								gap: 10px;
							}
							
							.item {
								background: lightblue;
							}
							
							.item:nth-child(n + 3) {
								background: pink;
							}
grid-area

grid-auto-flow

  • row
  • column
  • dense

grid-template-areas


							.container {
								display: grid;
								grid-template-columns: 1fr 200px 1fr;
								grid-template-rows: repeat(4, 150px);
								grid-template-areas:
									"header header header"
									"content content 👾"
									"content content ."
									"footer footer footer";
							}
							
							.item1 {
								grid-area: header;
								background-color: purple;
							}
							
							.item2 {
								grid-area: content;
								background-color: gray;
							}
							
							.item3 {
								grid-area: 👾;
								background-color: pink;
							}
							
							.item4 {
								grid-area: footer;
								background-color: #bada55;
							}
grid-area

grid-template


						.container {
							display: grid;
							grid-template: repeat(4, 150px) / 1fr 200px 1fr;
						}

column-gap

row-gap


						.container {
							display: grid;
							grid-template-columns: 1fr 200px 1fr;
							grid-template-rows: repeat(3, 150px);
							column-gap: 10px;
							row-gap: 50px;
						}

gap


						.container {
							display: grid;
							grid-template-columns: 1fr 200px 1fr;
							grid-template-rows: repeat(3, 150px);
							gap: 50px 10px;
						}

justify-items

start

grid-line

end

grid-cell

center

grid-track

stretch grid-area

Align-items

  • start
  • end
  • center
  • stretch

grid

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Grid Element Properties

grid-column-start

grid-column-end

grid-row-start

grid-row-end


							.container {
								display: grid;
								grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six];
								grid-template-rows: [row1-start] 1fr [row1-end] 1fr 1fr;
							}
							
							.item1 {
								grid-column-start: 2;
								grid-column-end: five;
								grid-row-start: row1-start;
								grid-row-end: 3;
							}
grid-area

grid-column

grid-row


						.item1 {
							grid-column: 3 / span 2;
							grid-row: third-line / 4;
						}

grid-area


						.item1 {
							grid-area: content;
						}
					

						.item2 {
							grid-area: 1 / col4-start / last-line / 6;
						}

justify-self


							.container {
								justify-items: stretch;
							}
							
							.item1 {
								justify-self: center;
							}
grid-area

align-self


							.container {
								align-items: stretch;
							}
							
							.item1 {
								align-self: start;
							}
grid-area

place-self

  • auto
  • align-self justify-self

Thank you for attention!