2

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>

Improve this question
3
  • 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. Commented Feb 27, 2019 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 : stackoverflow.com/a/40777362/8620333 / stackoverflow.com/a/35046535/8620333 which confirms the duplicate Commented Feb 27, 2019 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" Commented Feb 27, 2019 at 12:12

1 Answer 1

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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?
You can add margin :)
It's controlled by flex - read up on it here. 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
And you are sure it is correct to mix up css grid and flexbox?
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
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.