Solution 1 :

Just set display:grid on the parent…

  .table-products {
  display: grid;
  grid-template-areas: "header1   header2" "body1   body2";
}

.table-products__header1 {
  grid-area: header1;
  background: yellow;
}

.table-products__body1 {
  grid-area: body1;
  background: green;
}

.table-products__header2 {
  grid-area: header2;
  background: blue;
}

.table-products__body2 {
  grid-area: body2;
  background: red;
}

.table-products__header1,
.table-products__header2,
.table-products__body1,
.table-products__body2 {
  width: 40%;
<div class="table-products">
  <div class="table-products__header1">
    header1
  </div>
  <div class="table-products__body1">
    body1
  </div>
  <div class="table-products__header2">
    header2
  </div>
  <div class="table-products__body2">
    body2
  </div>
</div>

Problem :

I am trying to organized 4 divs in 2 colums and 2 rows but they show up in just a column and 4 rows. I am using grid-template-areas like this …

  .table-products {
    display: flex, grid;
  }
  .grid {
  grid-template-areas:
    "header1   header2"
    "body1   body2";
  }
  .table-products__header1 {
  grid-area: header1;
  background: yellow;
  }
.table-products__body1 {
  grid-area: body1;
  background: green;
  }
.table-products__header2 {
  grid-area: header2;
  background: blue;
  }
.table-products__body2 {
  grid-area: body2;
  background: red;
  }
.table-products__header1, .table-products__header2, .table-products__body1, .table-products__body2 {
  width: 40%;
<div class="table-products">
<div class="table-products__header1">
header1
</div>
<div class="table-products__body1">
body1
</div>
<div class="table-products__header2">
header2
</div>
<div class="table-products__body2">
body2
</div>
</div>

I would like to have the headers next to each other and the bodies just below.

Could you help me? Thanks!!

Comments

Comment posted by david

Thanks Paulie_D!! I have just updated it and still no working.

Comment posted by Temani Afif

you update nothing (1) your display value is wrong (2) you have no element with the .grid class

By

Leave a Reply

Your email address will not be published. Required fields are marked *