Organizing images and text

Question

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

Answer 1

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 class="wrapper">
  <div class="parent">
    <div class="img">Photo</div>
    <div class="text">Text</div>
 </div>
  
 <div class="parent">
    <div class="img">Photo</div>
    <div class="text">Text</div>
 </div>
  
  <div class="parent">
    <div class="img">Photo</div>
    <div class="text">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 class="wrapper">
  <div class="parent">
    <div class="img">Photo1</div>
    <div class="text">Text1</div>
 </div>
  
 <div class="parent">
    <div class="img">Photo2</div>
    <div class="text">Text2</div>
 </div>
  
  <div class="parent">
    <div class="img">Photo3</div>
    <div class="text">Text3</div>
 </div>
  
</div>