css grid auto rows
<!DOCTYPE html> <html> <head> <style> .grid-container{ display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto; grid-auto-rows: 150px 200px; grid-row-gap: 15px; grid-column-gap: 15px; padding: 15px; background: tomato; } .grid-item{ text-align: center; line-height: 100px; font-size: 25px; background: white; } </style> </head> <body> <h1>CSS grid-auto-rows Property</h1> <h2>grid-auto-rows: 150px 200px;</h2> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> <p style="background:yellow;margin-bottom: 30px;"><b>Note: </b>Notice that only the second and the third row are affected by the grid-auto-rows property. This is because they are created implicitly.</p> </body> </html>
