CSS grid-row-end Property - Playground Example

« Back to CSS grid-row-end 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-template-rows: [line1] auto  [line2] auto  [line3] auto  [line4] auto;
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41);
   border: 1px solid #000; 
   text-align: center;
} 
.item-a {
   grid-row-end: 3;
   background: red !important;
}
.item-b {
   grid-row-end: line4;
   background: yellow !important; 
}
</style>
</head>
<body>
<div class="grid-container">
   <div class="item-a">A</div>
   <div>B</div>
   <div>C</div>
   <div>D</div>
</div>
<div class="grid-container2">
   <div>A</div>
   <div class="item-b">B</div>
   <div>C</div>
   <div>D</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