How to make grid layout using Flexbox

Asked Apr 21 '20 at 18:12

Active Apr 21 '20 at 18:24

Viewed 39 times

I want to make this layout: click

I have this code:

.tiles-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.tile {
  width: 21%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 0px 61px 0px rgba(0, 0, 0, 0.1);
}

<div class="tiles-container">
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
  <div class="tile">name</div>
</div>

The problem is that there isn't space between items vertically. I could achive it by using margin-bottom, but i want the space to be equal on every side. Can you help, please?

asked Apr 21 '20 at 18:12

PHPisMyPassion

2

Why not use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to make a grid layout? – Heretic Monkey Apr 21 '20 at 18:16
`flex-grow:1;` then set a universal margin – Rainbow Apr 21 '20 at 18:21
@HereticMonkey i once heard that it is best to stick to one method of making layout (float, flex or grid). On my website i only use flexbox so that's way. I am not sure is it good practice to be honest :\ – PHPisMyPassion Apr 21 '20 at 18:27
@ZohirSalak thank you it worked :) – PHPisMyPassion Apr 21 '20 at 18:28

How to make grid layout using Flexbox

0 Answers0