Search code examples
htmlcsslayoutflexbox

How to make layout using css flexbox

enter image description here

I am trying to make layout like showing in the picture using CSS.

HTML -

<section>

        <div class="row">

            <div class="column-row">
                <img src="./images/cases/cases1.jpg" alt="">
                <img src="./images/cases/cases2.jpg" alt="">
                <img src="./images/cases/cases3.jpg" alt="">
                <img src="./images/cases/cases4.jpg" alt="">

            </div>

            <div class="column-row-2">
                <img src="./images/cases/cases5.jpg" alt="">
                <img src="./images/cases/cases6.jpg" alt="">
                <img src="./images/cases/cases7.jpg" alt="">
                <img src="./images/cases/cases8.jpg" alt="">
            </div>

        </div>


    </section>

CSS -

.row {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;}



.column-row {
display: flex;
width: 25%;
max-width: 25%;}

.row should make the, two div placed as column,,two div on top of each other,Each div contain 4 images

Then .column-row should display 4 images in a row.. and should look like the picture attached..

I am new to css... I am not able to understand why my code is not working..Please help..

Solution

  • So you want something like this?

    I have removed your columns since they are unnecessary and set row to flex-direction row and added flex-wrap so they dont overflow.

    I've reduced the width to 23% so that they have some space inbetween.

    .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

img {
margin-top: 30px;
  display: flex;
  width: 23%;
  max-width: 23%;
}
    <section>
  <div class="row">
      <img src="https://picsum.photos/200/200" alt="">
      <img src="https://picsum.photos/200/200" alt="">
      <img src="https://picsum.photos/200/200" alt="">
      <img src="https://picsum.photos/200/200" alt="">
      <img src="https://picsum.photos/200/200" alt="">
      <img src="https://picsum.photos/200/200" alt="">
      <img src="https://picsum.photos/200/200" alt="">
      <img src="https://picsum.photos/200/200" alt="">
  </div>
</section>