Grid Cheatsheet

grid-template-rows

.item { width: auto; height: auto; } .container { display: grid; grid-template-columns: 200px 200px; grid-template-rows: 100px 100px; }

grid-template-columns

.item { width: auto; height: auto; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } .container { display: grid; grid-template-columns: repeat(3, 1fr); } .container { display: grid; grid-template-columns: repeat(3, minmax(30px, auto)); } .container { display: grid; grid-template-columns: minmax(50%, 80%) 1fr 1fr; } .container { display: grid; grid-template-columns: repeat(3, minmax(30px, 100px)); width: 100px; } .container { display: grid; grid-template-columns: repeat(3, minmax(30px, 100px)); width: 400px; }

gap

.container { gap: 0; } .item { width: auto; height: auto; } .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; } .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10%; } .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; } .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20% 10%; }

row-column, start-end

.item { width: auto; height: auto; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } .item1 { grid-column-start: 1; grid-column-end: 3; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } .item1 { grid-row-start: 1; grid-row-end: 3; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .item1 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .item2 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .item1 { grid-column: 2 / 3; grid-row: 1 / 3; } .item2 { grid-column: 1 / 3; grid-row: 3 / 4; }

grid-area

grid1 grid2 grid3 grid4 grid5 grid6 grid7 .item { width: auto; height: auto; } .item { background-color: var(--primary-3); } .item1, .item2 { background-color: var(--primary-5); } .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .item1 { grid-area: 1 / 2 / 3 / 3; } .item2 { grid-area: 3 / 1 / 4 / 3; }

grid-template-areas

header main sidebar footer .item { width: auto; min-height: 80px; height: auto; } .item3, .item4 { background-color: #fff0e6; color: #765451; } .container { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: "header header header header header" "main main main side side" "footer footer footer footer footer"; } .item1 { grid-area: header; } .item2 { grid-area: main; } .item3 { grid-area: side; } .item4 { grid-area: footer; }