CODEWITHSUNDEEP
htmlcss
saltmangotree
saltmangotree

Reputation: 171

Show 5 divs every row with all rows starting and ending same place

I am looking to create 5 divs (tiles) on every row.

I partly achieved this by checking for every 5th element and inserting an empty div if the count is a multiple of 5. However, this results in the each row starting and ending at different positions depending on the length of the word. Instead, I am looking to have all the start and end positions be aligned, pretty much like a table.

Here is a code sandbox I have created to demo this

https://codesandbox.io/s/grids-5-on-a-line-wghvs?file=/src/App.tsx

Here is a picture of my current output enter image description here

Is it possible to achieve this using CSS styling, or would I need to create a table instead? Could someone please suggest a solution?

Upvotes: 0

Views: 1103

Answers (1)

Guillermo del Molino
Guillermo del Molino

Reputation: 31

You can use a CSS grid to achieve this.

<div class="grid">
  <div class="inner-card"></div>
  <div class="inner-card"></div>
  ...
</div>

.grid {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

This will create a grid, with each column occupying 20% in width. If you need spacing between the elements, you can use the row-gap and column-gap properties. You can read more about CSS grids and how they work here: https://css-tricks.com/snippets/css/complete-guide-grid/

Upvotes: 3

Related Questions