Question 294484 in CSS Question posted in
Some basic documentation can be found here.

Css – Multiple grid-child in same grid-area

I want to create a card which is pretty simple, and contains only an image, a paragraph and two buttons.
The card I want to create:

card I want to create

<div class="container">
  <img src="" alt="">
  <p></p>
  <button></button>
  <button></button>
</div>

.container{  
  padding: 2rem;
  grid-template-columns:[img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

Then I place my buttons:

button{
  grid-column: content;
  grid-row: 2/3;
}

.container {
  padding: 2rem;
  grid-template-columns: [img-start] 120px [img-end content-start] 1fr [content-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

button {
  grid-column: content;
  grid-row: 2/3;
}
<div class="container">
  <img src="" alt="">
  <p></p>
  <button></button>
  <button></button>
</div>

However, the buttons overlap and aren’t next each other, so I wish to know if there’s a way to place multiple grid-items in the sane grid-area and say that this area is like a flex-row wrapper?

I would have used flexbox with some divs which wrapped the buttons, and assigned this div inside the grid-area, but I want to use grid to gain knowledge of this CSS property. So I wonder if there is a native grid way to do so?

Tags:

2

Answers


  1. 0

    As Chris Barr mentioned, CSS Grid Layout is useful when the content is evenly spread as columns and rows. In this case, You can use Flex as shown below.

    .container {
  display: flex;
  flex-direction: row;
  padding: 10px;
  border: 1px solid #000;
  width: 500px;
}

.thumbnail {
  width: 150px;
}

.content {
  padding-left: 10px;
}
    <div class="container">
  <img src="https://shorturl.at/aceI2" alt="" class="thumbnail">
  <div class="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem diam, egestas at ipsum nec, luctus molestie turpis. Proin tempus sagittis lobortis. Ut nec velit ac odio eleifend semper.
    </p>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    If you want to use the grid layout, you need to add another column to fit the second button.
    The paragraph should span the 2 last columns and each button should have their own column like this :

    .container {
  display: grid;
  padding: 2rem;
  grid-template-columns: [img-start] 120px [img-end content1-start] 1fr [content1-end content2-start] 1fr [content2-end];
  grid-column-gap: 1.6rem;
  grid-template-rows: repeat(2, auto)
}

img {
  grid-column: img;
  grid-row: 1/3;
}

p {
  grid-column: 2/4;
  grid-row: 1/2;
}

.btn1 {
  grid-column: content1;
  grid-row: 2/3;
}

.btn2 {
  grid-column: content2;
  grid-row: 2/3;
}
    <div class="container">
  <img src="https://placehold.co/120x120/EEE/31343C" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat justo mattis magna sagittis, ac varius erat porttitor. Vivamus mollis pulvinar lacus in dignissim. Nunc eu nisi vitae augue ornare volutpat.</p>
  <button class="btn1">Btn 1</button>
  <button class="btn2">Btn 2</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search