given this html

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>

and this css

.parent { 
  display: grid;
  grid-template-areas: 
  'first second'
  'third third'
  'fourth fourth'
}

I expected the grid area "third" and "fourth" to implicitly have 1 column, which would render like so

I understand I can fix this by specifying grid-area, curious if theres another approach?

https://jsfiddle.net/qgdh2b8a/2/

CodePudding user response：

This isn't a completely different approach, but you could use grid-column and not use grid-template-areas entirely. This solution also uses grid-template-columns.

.parent { 
  display: grid;
  grid-gap: 3px;
  /* Defines two columns */
  grid-template-columns: 1fr 1fr;
}

.parent > div {
  /* Visibility and styling */
  background-color: black;
  color: white;
  padding: 1rem;
  text-align: center;
  font-family: sans-serif;
}

.third, .fourth {
  /* Sets the column that the item should span */
  grid-column: 1 / -1;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>

Here, the third and fourth classes have this style applied: grid-column: 1 / -1. The slash specifies the amount of columns that the element should span. 1 is the first column and -1 is the first from last (the last column).

Examples:

• grid-column: 3 Sets the grid column to 3.
• grid-column: 1 / 3 Sets the element to span columns 1 through 3.
• grid-column: 1 / -2 Sets the element to span columns 1 through the 2nd last one.

CodePudding user response：

You can use grid-column.

.first {
        gird-column: 1 / 3;  //like this
    }

This tells the grid to start from the beginning of the first column, till the beginning of the third column.

The same can work for grid-rows.

You can read more here: grid-column