css grid auto rows

Solutions on MaxInterview for css grid auto rows by the best coders in the world

showing results for - "css grid auto rows"

30 Feb 2019

1<!DOCTYPE html>
2<html>
3<head>
4   <style>
5   	.grid-container{
6   	    display: grid;
7        grid-template-columns: auto auto auto;
8        grid-template-rows: auto;
9        grid-auto-rows: 150px 200px;
10   	    grid-row-gap: 15px;
11        grid-column-gap: 15px;
12   	    padding: 15px;
13   	    background: tomato;
14   	}
15   	.grid-item{
16   	    text-align: center;
17   	    line-height: 100px;
18   	    font-size: 25px;
19   	    background: white;
20   	}
21   </style>
22</head>
23<body>
24	<h1>CSS grid-auto-rows Property</h1>
25    <h2>grid-auto-rows: 150px 200px;</h2>
26    <div class="grid-container">
27        <div class="grid-item">1</div>
28        <div class="grid-item">2</div>
29        <div class="grid-item">3</div>
30        <div class="grid-item">4</div>
31        <div class="grid-item">5</div>
32        <div class="grid-item">6</div>
33        <div class="grid-item">7</div>
34        <div class="grid-item">8</div>
35        <div class="grid-item">9</div>
36    </div>
37    
38    <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>
39</body>
40</html>

source