<!DOCTYPE html> <html> <head> <style> #grid{ display: grid; background-color:rgba(230,230,230,1); grid-template-columns: 90px 1fr 100px; grid-template-rows: 150px 1fr 120px; grid-template-areas: "h h h" "a b c" "f f f"; } #item1{ grid-area: h; background-color:lightgreen; } #item2{ grid-area: a; background-color:lightgray; } #item3{ grid-area: f; background-color:lightblue; } </style> </head> <body> <div id="grid"> <div id="item1"> my height is 150px. And my width is minimum 190px. </div> <div id="item2"> My height is a fraction of the total height of the grid (remaining space) but my width is fixed i.e. 90px. </div> <div id="item3"> my height is 120px. And my width is minimum 190px. </div> </div> </body> </html>
Run
×
Share