CSS Grid (or) Flex for two rows with 4 and 3 columns

Question

Help, please with this grid. I need to do this using css grid or flex. Now I have

But I need this:

Help please, how to build columns like as in the last screenshot? Thanks in advance!

.grid {
    display:grid;
}
.cols-4 {
    grid-template-columns: repeat(4,1fr);   
    grid-column-gap: 20px;
    grid-row-gap: 20px; 
}

<div class="grid cols-4">
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
    <div>
        Lorem ipsum dolor...
    </div>
</div>

Can you post code that you have so far? From this I can only tell... try using `display: flex` and `justify-content: center` on second row. — Šimon Slabý, Mar 01 '21 at 17:33

Šimon Slabý · Answer 1 · 2021-03-01T18:05:34.790

I used Bootstrap just to make same layout like you have.... Only thing important for you is class called two... I recommend to do something like this:

  <div class="row">
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
  </div>
  <div class="row two m-3">
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
    <div class="w-25 border p-3">
      Lorem Ipsum
    </div>
  </div>

CSS:

.two{
  display: flex;
  justify-content: center;
}

You can use class="two" on both rows.... it depends on your needs.

EDIT 1:

.flex-rows{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-rows div{
  margin: 0.5rem;
  padding: 1.5rem;
  width: 3rem;
  border: 2px solid black;
  box-shadow: 2px 2px 10px black;
}

<div>
    <div class="flex-rows">
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
    </div>
    <div class="flex-rows">
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
      <div>
        Lorem ipsum dolor...
      </div>
    </div>
  </div>

You don't need to use Bootstrap... I used it only to imitate the same grid.... — Šimon Slabý, Mar 01 '21 at 17:54
Oh... I understand. Thanks. I will use this if no other solutions are offered. — stackdo, Mar 01 '21 at 18:03

CSS Grid (or) Flex for two rows with 4 and 3 columns

1 Answers1