.parent{ display: grid; grid-template-columns: repeat(3, 250px); /* instead of writing 250px 250px 250px 3 times, we use repeat(number of columns, width) function */ grid-template-rows: repeat(3, 400px); } .parent .child-1{ grid-column: 2 / 4; /* Start at column 2 and end at column 3, 4 not counted [not inlcuded]*/ grid-row: span 2; /* take only 2 rows. can be written also as [grid-row: 1 / 3]*/ } .parent .child-2{ grid-column: span 3; grid-row: 1 / 3; /* 2 rows */ } /* ShortHand grid-column: grid-column-start grid-column-end grid-row: grid-row-start grid-row-end Example: *grid-column: 2 / 8; start at 2 and end at 8-1 = 7 => grid-column-start = 2, grid-column-end = 7 */

css display grid

.container { grid-template-columns: 1fx 1fr 1fr; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; }

css grid

.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"; }

css grid

<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> .grid-container { width: 300px; height: 300px; display: grid; grid-template-columns: auto auto auto; place-items: center; } .grid-item { background-color: silver; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; }

css grid

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

css grid

Similar Code Examples