Can CSS grid be used when each row is wrapped in its own container div?

user_1045755 0
Viewed 548

I currently have a simple table with a main container (i.e. display: table). In that container I have some rows (i.e. display: table-row), which then have some divs (i.e. display: table-cell).

.table {
  display: table;
  margin-bottom: 50px;
}

.table .table-row {
  display: table-row;
}

.table .table-row div {
  display: table-cell;
  padding: 10px;
  border: 1px red solid;
}
<div class="table">
  <div class="table-row">
    <div>Name</div>
    <div>Phone</div>
    <div>E-mail</div>
    <div>City</div>
    <div>Last meal</div>
    <div>Number of meals</div>
  </div>
  <div class="table-row">
    <div>John Doe</div>
    <div>12 34 56 78 910</div>
    <div>mail @mail.com</div>
    <div>Moscow</div>
    <div>1. June 2020</div>
    <div>13</div>
  </div>
  <div class="table-row">
    <div>Roger John Doe</div>
    <div>12 34 56 78 910</div>
    <div>myothermail @myothermail.com</div>
    <div>New York</div>
    <div>1. September 2020</div>
    <div>102</div>
  </div>
  <div class="table-row">
    <div>Roger Rabbit John Doe</div>
    <div>12 34 56 78 910</div>
    <div>mymail @mymail.com</div>
    <div>London</div>
    <div>1. May 2020</div>
    <div>55</div>
  </div>
</div>

Can a CSS grid be used to achieve this same layout, without removing the div which wraps the contents of each row?

I have tried defining a grid on each row. In this case, if you shrink the window, the cells start to collapse, and are no longer aligned with the cells below.

.row-header,
.row {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  font-size: 13px;
  justify-content: start;
}

.row-header div,
.row div {
  padding: 10px;
  border: 1px red solid;
}
<div class="row-header">
  <div>Name</div>
  <div>Phone</div>
  <div>E-mail</div>
  <div>City</div>
  <div>Last meal</div>
  <div>Number of meals</div>
</div>
<div class="row">
  <div>John Doe</div>
  <div>12 34 56 78 910</div>
  <div>mail @mail.com</div>
  <div>Moscow</div>
  <div>1. June 2020</div>
  <div>13</div>
</div>
<div class="row">
  <div>Roger John Doe</div>
  <div>12 34 56 78 910</div>
  <div>myothermail @myothermail.com</div>
  <div>New York</div>
  <div>1. September 2020</div>
  <div>102</div>
</div>
<div class="row">
  <div>Roger Rabbit John Doe</div>
  <div>12 34 56 78 910</div>
  <div>mymail @mymail.com</div>
  <div>London</div>
  <div>1. May 2020</div>
  <div>55</div>
</div>

css-grid css-tables css
2 Answers

.table {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.table div {
  padding: 10px;
  border: 1px red solid;
}

.gridspan2{
  grid-column: span 2;
}

code{
  background-color: #bbb;
  padding: 3px;
}
<div class="table">
  <div>Name</div>
  <div>Phone</div>
  <div>E-mail</div>
  <div>City</div>
  <div>Last meal</div>
  <div>Number of meals</div>

  <div>John Doe</div>
  <div>12 34 56 78 910</div>
  <div>mail @mail.com</div>
  <div>Moscow</div>
  <div>1. June 2020</div>
  <div>13</div>

  <div>Roger John Doe</div>
  <div>12 34 56 78 910</div>
  <div>myothermail @myothermail.com</div>
  <div>New York</div>
  <div>1. September 2020</div>
  <div>102</div>

  <div>Roger Rabbit John Doe</div>
  <div>12 34 56 78 910</div>
  <div class="gridspan2">mymail @mymail.com (This cell has <code>grid-column: span 2</code> on it</div>
  <div>1. May 2020</div>
  <div>55</div>
</div>

Like that, yes

But you can NOT have rows in CSS grid. You can, however, define grid-column: span 2 on a cell to combine 2 regular cells.

user_88070190

TL;DR: Not yet.

CSS grids only operate on their direct children; each direct child is a cell within the grid. You can nest grids, but the nested grid's tracking (i.e., alignment of rows and columns) has no relation to its parent's tracking.

This shortcoming was anticipated when CSS-grid was introduced in the CSS Grid Layout Module Level 1 specification. The subgrid feature will address this shortcoming, and will be introduced in CSS Grid Layout Module Level 2, which is currently in "working draft" status.

Firefox (v71 or newer; current stable release is v78) is currently the only browser to include support for CSS subgrid. Others will soon follow, as the specification matures.

The code snippet below demonstrates how the subgrid will work. This example works in Firefox today.

This example defines a grid with 6 columns and an automatic number of rows. Each row is wrapped in a container div, and that div spans all 6 columns of the parent grid, just like a table would do. The subgrid is defined in the column direction, meaning all of the parent grid's columns that are spanned by the subgrid become the column definitions for that subgrid.

.grid {
  /* the parent grid. */
  display: grid;

  /* this grid has 6 equally sized columns. */
  grid-template-columns: repeat(6, 1fr);
}

.grid .row {
  /* a subgrid is just a nested grid whose column
   * and/or row definitions are based on its parent. */
  display: grid;

  /* this subgrid spans from the first column to the
   * last column of the parent grid. */
  grid-column: 1 / -1;

  /* this means that the subgrid's column
   * definitions are based the parent's columns
   * that we spanned.
   * this is the part that isn't well-supported
   * in browsers yet. */
  grid-template-columns: subgrid;
}

.cell {
  padding: 10px;
  border: 1px red solid;
}
<div class="grid">
  <div class="row header">
    <div class="cell">Name</div>
    <div class="cell">Phone</div>
    <div class="cell">E-mail</div>
    <div class="cell">City</div>
    <div class="cell">Last meal</div>
    <div class="cell">Number of meals</div>
  </div>
  <div class="row">
    <div class="cell">John Doe</div>
    <div class="cell">12 34 56 78 910</div>
    <div class="cell">mail @mail.com</div>
    <div class="cell">Moscow</div>
    <div class="cell">1. June 2020</div>
    <div class="cell">13</div>
  </div>
  <div class="row">
    <div class="cell">Roger John Doe</div>
    <div class="cell">12 34 56 78 910</div>
    <div class="cell">myothermail @myothermail.com</div>
    <div class="cell">New York</div>
    <div class="cell">1. September 2020</div>
    <div class="cell">102</div>
  </div>
  <div class="row">
    <div class="cell">Roger Rabbit John Doe</div>
    <div class="cell">12 34 56 78 910</div>
    <div class="cell">mymail @mymail.com</div>
    <div class="cell">London</div>
    <div class="cell">1. May 2020</div>
    <div class="cell">55</div>
  </div>
</div>

For now, CSS tables are the best way to accomplish a grid/table layout if you need your cells to be nested in the markup.

user_39612710
Related