How to split div element into multiple rows and columns in css?-CodePudding

I have 4 images into a div, how to split them in 2 columns of 2 images in CSS?

   <div id="your-cards">
    <img src="./cards/BACK5.jpeg" aria-valuetext="7-c" id="P0">
    <img src="./cards/BACK5.jpeg" aria-valuetext="4-c" id="P1">
    <img src="./cards/BACK5.jpeg" aria-valuetext="2-h" id="P2">
    <img src="./cards/BACK5.jpeg" aria-valuetext="A-c" id="P3">
    </div>

Thanks

CodePudding user response：

You can use CSS Grid and set the set the columns to repeat twice with a size that matches the dimensions of the images.

#your-cards { display: grid; grid-template-columns: repeat(2, 50px); gap: 0.5em; }

<div id="your-cards">
  <img src="https://dummyimage.com/50x50/555/f0f" aria-valuetext="7-c" id="P0">
  <img src="https://dummyimage.com/50x50/6e6/fff" aria-valuetext="4-c" id="P1">
  <img src="https://dummyimage.com/50x50/a33/fff" aria-valuetext="2-h" id="P2">
  <img src="https://dummyimage.com/50x50/44d/fff" aria-valuetext="A-c" id="P3">
</div>

CodePudding user response：

You could use css flex properties to do this:

#your-cards {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}

#your-cards div {
  list-style: none;
  flex: 0 0 50%;
}

<div id="your-cards">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

When you give flex 3 properties, it specifies: