Align text in CSS element grid

Question

I have made this CSS grid. I am still practising using the CSS grid, so I am trying to imitate this site. I would like to place the text the same place as the template I link to.

But how is the correct way to do this? At the moment the link is in the upper left corner.

Should I make another div inside the first div tag, or what is the best way to do it?

Best regards.

.wrapper {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-gap: 10px;
  } 

  .wrapper > div {
    background-color: #eee;
    padding: 1em;
    box-sizing: border-box;
  }

  .wrapper > div:nth-child(odd) {
    background-color: #ddd;
  }

  .item1 {
    grid-row: 1 / 3;
    grid-column: 1/7;
    height: 700px;
  }
  .item2 {
    grid-row: 1 / 1;
    grid-column: 7/13;
    height: 340px;
  }
  .item3 {
    grid-row: 2 / 3;
    grid-column: 7/10;
    height: 350px;
  } 
  .item4 {
    grid-row:2/3;
    grid-column: 10/13;
    height: 350px;
  }
  a {
    font-size: 30px;
  }

  @media only screen and (max-width: 600px) {
    .wrapper {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
    } 
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/13;
      height: 350px;
    }
    .item2 {
      grid-row: 3 / 3;
      grid-column: 1/13;
      height: 200px;
    }
    .item3 {
      grid-row: 4 / 5;
      grid-column: 1 / 7;
      height: 200px;
    } 
    .item4 {
      grid-row: 4 / 5;
      grid-column: 7 / 13;
      height: 200px;
    }
  }
    
    /*
    .nested {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-gap:1em;
    }
    .nested > div {
      border:1px solid red;
      grid-auto-rows: 70px;
      padding:1em;
    }
    */

<div class="wrapper">
    <div class="item1">
      <a href="#">Watch a tiny cat taking a bath</a>
    </div>
    <div class="item2">
      <a href="#">Spain: Take a virtual tour</a>
    </div>
    
    <div class="item3">
      <a href="#">5 Tips to create your garden</a>
    </div>
    
    <div class="item4">
      <a href="#">10 Movies you need to see</a>
    </div>
  
  </div>

To those one who marks this as a dublicate question and make the "this question already has an answer here:". All the links there is posted has nothing to do with flexbox and CSS grid placement of text. — McDuck4, Feb 27 '19 at 11:36
simply because it's not about flexbox or CSS gird, it's about aligning text inside a div. If you read the duplicate you will notice a flexbox solution the same as the answer you accepted : https://stackoverflow.com/a/40777362/8620333 / https://stackoverflow.com/a/35046535/8620333 which confirms the duplicate — Temani Afif, Feb 27 '19 at 11:49
the text is not inside the grid .. Your wrapper is the grid element and the item are grid item, this is the scope of your grid .. what is inside item doesn't belong to grid. Can you then explain me how the flexbox is working fine for you? simply because you made the grid item to be a flex container to align text inside or you can do this differently with any technique described in the duplicate. Using display:grid will not make ALL your html to be a grid, only the element where you apply it. So your question is "to align text inside a div" — Temani Afif, Feb 27 '19 at 12:12

score 2 · Accepted Answer · answered Feb 27 '19 at 11:13

Add this to the item

display: flex;
justify-content: flex-end;
flex-direction: column;

.wrapper {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-gap: 10px;
  } 

  .wrapper > div {
    background-color: #eee;
    padding: 1em;
    box-sizing: border-box;
  }

  .wrapper > div:nth-child(odd) {
    background-color: #ddd;
  }

  .item1 {
    grid-row: 1 / 3;
    grid-column: 1/7;
    height: 700px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }
  .item2 {
    grid-row: 1 / 1;
    grid-column: 7/13;
    height: 340px;
  }
  .item3 {
    grid-row: 2 / 3;
    grid-column: 7/10;
    height: 350px;
  } 
  .item4 {
    grid-row:2/3;
    grid-column: 10/13;
    height: 350px;
  }
  a {
    font-size: 30px;
  }

  @media only screen and (max-width: 600px) {
    .wrapper {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
    } 
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/13;
      height: 350px;
    }
    .item2 {
      grid-row: 3 / 3;
      grid-column: 1/13;
      height: 200px;
    }
    .item3 {
      grid-row: 4 / 5;
      grid-column: 1 / 7;
      height: 200px;
    } 
    .item4 {
      grid-row: 4 / 5;
      grid-column: 7 / 13;
      height: 200px;
    }
  }
    
    /*
    .nested {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-gap:1em;
    }
    .nested > div {
      border:1px solid red;
      grid-auto-rows: 70px;
      padding:1em;
    }
    */

<div class="wrapper">
    <div class="item1">
      <a href="#">Watch a tiny cat taking a bath</a>
    </div>
    <div class="item2">
      <a href="#">Spain: Take a virtual tour</a>
    </div>
    
    <div class="item3">
      <a href="#">5 Tips to create your garden</a>
    </div>
    
    <div class="item4">
      <a href="#">10 Movies you need to see</a>
    </div>
  
  </div>

Thank you a lot for your answer. I can see that is working. But what is controlling the placement of the text? If I wanted the text more up than now, is it a padding I have to use, or is there a smart way to do this? — M375, Feb 27 '19 at 11:22
It's controlled by `flex` - read up on it [here](https://www.w3schools.com/css/css3_flexbox.asp). You tell the content inside the item to be column (vertical) and then align it to be at the end `flex-end`. Hope this makes sense — Marc Hjorth, Feb 27 '19 at 11:28
And you are sure it is correct to mix up css grid and flexbox? — McDuck4, Feb 27 '19 at 11:30
I'm not that familiar with CSS Grid, and I'm sure you can find a way to do it with that instead, but flexbox works and I don't see a reason, not to use it — Marc Hjorth, Feb 27 '19 at 11:32

Align text in CSS element grid

1 Answers1