grid auto rows and auto columns

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>

Posted by: Guest on September-05-2021

Source

Answers for "grid auto rows and auto columns"

Code answers related to "grid auto rows and auto columns"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us