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

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 >
  <div >ONE</div>
  <div >TWO</div>
  <div >THREE</div>
  <div >FOUR</div>
  <div >FIVE</div>
  <div >SIX</div>
  <div >SEVEN</div>
  <div >EIGHT</div>
  <div >NINE</div>
  <div >TEN</div>
  <div >ELEVEN</div>
  <div >TWELVE</div>
</div>

CodePudding user response：

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 >
  <div >ONE</div>
  <div >TWO</div>
  <div >THREE</div>
  <div >FOUR</div>
  <div >FIVE</div>
  <div >SIX</div>
  <div >SEVEN</div>
  <div >EIGHT</div>
  <div >NINE</div>
  <div >TEN</div>
  <div >ELEVEN</div>
  <div >TWELVE</div>
  <div >THIRTEEN</div>
  <div >FOURTEEN</div>
</div>

CodePudding user response：

.cards {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.card {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div >
  <div >ONE</div>
  <div >TWO</div>
  <div >THREE</div>  
  <div >FOUR</div>
  <div >FIVE</div>
  <div >SIX</div>  
  <div >SEVEN</div>
  <div >EIGHT</div>
  <div >NINE</div>  
</div>

CodePudding user response：

A simple way to achieve this is by using nth-child CSS selector on your card class. Since, you want to display only he first 9 cards in the container, you will have to hide the cards from 10th position onwards.

Consider :nth-child(an b). Here, the term b is the offset that you can specify to target cards. If you remove a and substitute the value of b as 10, it will target all the cards that appear as 10th child and later. The selector will be like so: :nth-child(n 10). This is a comparatively readable solution.

Bonus Tip: To make sure the cards show up as 3 x 3 grid, you can explicitly update grid-template-columns CSS property to be repeat(3, 1fr) instead of repeat(auto-fill, minmax(150px, 1fr))

This is the final snippet:

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

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

/* Hide card which occurs at 10th position and above */
.card:nth-child(n   10) {
  display: none;
}

<div >
  <div >ONE</div>
  <div >TWO</div>
  <div >THREE</div>
  <div >FOUR</div>
  <div >FIVE</div>
  <div >SIX</div>
  <div >SEVEN</div>
  <div >EIGHT</div>
  <div >NINE</div>
  <div >TEN</div>
  <div >ELEVEN</div>
  <div >TWELVE</div>
</div>

CodePudding user response：

I use this tool and it makes everything easier : https://cssgrid-generator.netlify.app/

You just select wich grid you want, how many rows... and it gives you the css html :)