How to make a 3 ✕ 3 grid using HTML and Css

July 13, 2022

I have 20 element for a grid view. But I want only 3✕3 grid view, where there will be only 9 element in the view window. And the rest of the element should be placed in the right side of the window as a scrollable asset.**

No matter what the screen size is I want to show only the first 9 element in the grid.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 5px;
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
</div>

>Solution :

In this case the grid should flow vertically. And you can set it up like this with some calculation:

.cards {
  /* how many columns on the first screen */
  --cols: 3;
  
  /* how many rows on the first screen */
  --rows: 3;
  
  /* grid gap */
  --gap: 5px;
  
  --width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
  display: grid;
  position: relative;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(var(--rows), 1fr);
  grid-auto-columns: var(--width);
  grid-gap: var(--gap);
  overflow-x: auto;
}

.card {
  background-color: dodgerblue;
  color: white;
  padding: 1rem;
  height: 4rem;
}

<div class="cards">
  <div class="card">ONE</div>
  <div class="card">TWO</div>
  <div class="card">THREE</div>
  <div class="card">FOUR</div>
  <div class="card">FIVE</div>
  <div class="card">SIX</div>
  <div class="card">SEVEN</div>
  <div class="card">EIGHT</div>
  <div class="card">NINE</div>
  <div class="card">TEN</div>
  <div class="card">ELEVEN</div>
  <div class="card">TWELVE</div>
  <div class="card">THIRTEEN</div>
  <div class="card">FOURTEEN</div>
</div>