Reputation: 171
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
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
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