Search code examples
htmlcsscss-grid

Simulating colspan in display grid

Please consider this code and Fiddle

HTML:

<div class="container">
<div class="container-row">
    <label>Field1:</label>
    <span>some text</span>
    <label>Field2:</label>
    <span>some text</span>
    <label>Field3:</label>
    <span>some text</span>
    <label>Field4:</label>
    <span>some text</span>
</div>
<div class="container-row">
    <label>Field5:</label>
    <span>some text</span>
    <label>Field6:</label>
    <span>some text</span>
</div>
<div class="container-rowclear">
    <label>Field7:</label>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</span>
</div>
<div class="container-rowclear">
    <label>Field8:</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</div>

CSS:

.container {
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 6px 6px -2px #6c6c6c;
}

.container-row {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 3fr;
}

.container-rowclear {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

the problem is, the two cells in divs with class container-rowclear aren't displayed correctly and there is a gap between them and above cells:

enter image description here

How can I align those cells and simulate colspan in table with display:grid?

Thanks

Solution

  • You're much better off keeping everything within one Grid, as we don't have subgrid yet. Here's an example (without all those divs):

    .container {
  display: grid;
  grid-template-columns: repeat(2, 2fr 3fr);
}

.span {grid-column: span 3;}
    <div class="container">
  <label>Field1:</label>
  <span>some text</span>
  <label>Field2:</label>
  <span>some text</span>
  <label>Field3:</label>
  <span>some text</span>
  <label>Field4:</label>
  <span>some text</span>
  <label>Field5:</label>
  <span>some text</span>
  <label>Field6:</label>
  <span>some text</span>
  <label>Field7:</label>
  <span class="span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</span>
  <label>Field8:</label>
  <span class="span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</div>

    Once we have subgrid, it will be possible for nested elements to follow the same rows/columns of the parent, but until then, it's better to avoid nesting grids if possible.