CODEWITHSUNDEEP
htmlcss
ozil
ozil

Reputation: 7117

How to make grid layout grow vertically

I want to make a grid look which grow vertically like below,
enter image description here

Is there any default layout which grew vertically, currently I am using display:grid layout

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-item {
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">item 1</div>
  <div class="grid-item">item 2</div>
  <div class="grid-item">item 3</div>
  <div class="grid-item">item 4</div>
  <div class="grid-item">item 5</div>
  <div class="grid-item">item 6</div>
  <div class="grid-item">item 7</div>
  <div class="grid-item">item 8</div>
  <div class="grid-item">item 9</div>
</div>

but it grew horizontal.

Upvotes: 0

Views: 3825

Answers (1)

Sarath Damaraju
Sarath Damaraju

Reputation: 371

You should use 

grid-auto-flow: column;

below is full CSS code

 .grid-container {
        display: grid;
        grid-template-rows: repeat(4, 100px);
        grid-gap: 10px;
        grid-auto-flow: column;
    }

    .grid-item {
      /* other css here */
    }

You can check the demo here

Upvotes: 3

Related Questions