Skip to navigation
Simple CSS grid layout example with border
19.08.22
<div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div> @media (min-width: 768px) { .wrapper { margin:0; padding:2px; display: grid; box-sizing: border-box; grid-auto-rows: 100px; grid-gap:1px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; outline: 1px solid #eee; } .box2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; outline: 1px solid #eee; } .box3 { grid-column-start: 2; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; outline: 1px solid #eee; } .box4 { grid-column-start: 3; grid-row-start: 3; grid-row-end: 4; outline: 1px solid #eee; } .box5 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 4; grid-row-end: 4; outline: 1px solid #eee; } }
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start
Reply
Anonymous
Information Epoch 1751597993
Files are bags of bytes.
Home
Notebook
Contact us
