Đặt các khu vực trong bố cục Grid với CSS

Để đặt các khu vực trong bố cục Grid, hãy sử dụng thuộc tính grid-template-areas. Xem ví dụ dưới đây:

Ví dụ

<!DOCTYPE html> <html> <head> <style> .demo {    grid-area: newArea; } .grid-container {    display: grid;    grid-template-areas:    'newArea newArea . . .'    'newArea newArea . . .';    grid-gap: 5px;    background-color: blue;    padding: 5px; } .grid-container > div {    background-color: orange;    text-align: center;    padding: 5px 0;    font-size: 30px; } </style> </head> <body> <h1>Heading One</h1> <p>Set some random numbers</p> <div class="grid-container"> <div class="demo">250</div> <div class="item2">120</div> <div class="item3">333</div> <div class="item4">298</div> <div class="item5">645</div> <div class="item6">543</div> <div class="item7">555</div> </div> </body> </html>

Kết quả