Organizing images and text-CodePudding

I am building a small web page as an exercise. I'm trying to arrange three photos next to three texts aside each other and it's not working. My idea is that they look like this:

                Photo---> text
                text--->photo
                photo--->text

And for that I wrapped the package of images and text in a then in css I put this:

               .grid-wrapper {
                   display:grid;
                   grid-template-columns. auto auto auto;
                   grid-gap: 10px;
               }

And well it hasn't worked. I appreciate your advice

CodePudding user response：

Use grid to create two separate columns. I believe the only mistake you were making was creating three columns rather than the intended two.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  width: 80%;
  margin: auto;
}

.img, .text {
  height: 100px;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

<div >
  
  <div >Image</div>
  <div >Text</div>
  
  <div >Image</div>
  <div >Text</div>
  
  <div >Image</div>
  <div >Text</div>
  
</div>

CodePudding user response：

You can achieve this by using grid or Flex

Grid Example

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  width: 80%;
  margin: auto;
}
.parent:nth-child(even){
  direction: rtl;
}

.img, .text {
  height: 100px;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

<div >
  <div >
    <div >Photo</div>
    <div >Text</div>
 </div>
  
 <div >
    <div >Photo</div>
    <div >Text</div>
 </div>
  
  <div >
    <div >Photo</div>
    <div >Text</div>
 </div>
  
</div>

FlexExample

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  width: 80%;
  margin: auto;
}
.parent:nth-child(even){
  flex-direction: row-reverse;
}

.img, .text {
  height: 100px;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

<div >
  <div >
    <div >Photo1</div>
    <div >Text1</div>
 </div>
  
 <div >
    <div >Photo2</div>
    <div >Text2</div>
 </div>
  
  <div >
    <div >Photo3</div>
    <div >Text3</div>
 </div>
  
</div>