CSS grid Property - Playground Example

« Back to CSS grid Property

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.grid-container,
.grid-container2 {
   display: grid; 
   margin-top: 5px;
   padding: 10px;
   background: rgb(0,150,208); 
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center; 
} 
.grid-container {
   grid: [row1] 1fr [row2] 2fr [row3] 3fr / [col1] 25% [col2] 25% [col3] 25%;
}
.grid-container2 {
   grid: 60px 40px 20px / 1fr 2fr 1fr;
}
</style>
</head>
<body>
<div class="grid-container">
   <div>A</div>
   <div>B</div>
   <div>C</div>
   <div>D</div>
   <div>E</div>
   <div>F</div>
   <div>G</div>
   <div>H</div>
</div>
<div class="grid-container2">
   <div>A</div>
   <div>B</div>
   <div>C</div>
   <div>D</div>
   <div>E</div>
   <div>F</div>
   <div>G</div>
   <div>H</div>
</div>
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee