Day 7: subgrids

Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+).

In the following example, the div elements use the grid defined in the dl element. The result is that all the dt and dd elements are aligned in the same “columns” respectively, even though they’re not on the same level in the DOM.

<dl>
  <div>
    <dt>HTML</dt>
    <dd>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</dd>
  </div>
  <div>
    <dt>JavaScript</dt>
    <dd>JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS</dd>
  </div>
</dl>
dl {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;
}

div {
  display: inherit;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

JavaScript
JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS

Both columns are neatly aligned in the same grid.

To make it a bit more obvious, here’s how the same grid looks like if you don’t use subgrid but copy the grid-template-columns declaration from the dl and use it on the div.

dl {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;
}

div {
  display: inherit;
  gap: inherit;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
}
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

JavaScript
JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS

The width of each element differs because each div forms its own grid.

My blog doesn’t support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Subgrid allows a grid-item with its own grid to align with its parent grid (currently only in Firefox 71+ and Safari 16+).

In the following example, the div elements use the grid defined in the dl element. The result is that all the dt and dd elements are aligned in the same “columns” respectively, even though they’re not on the same level in the DOM.

<dl>
  <div>
    <dt>HTML</dt>
    <dd>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</dd>
  </div>
  <div>
    <dt>JavaScript</dt>
    <dd>JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS</dd>
  </div>
</dl>
dl {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;
}

div {
  display: inherit;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
JavaScript
JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS
Both columns are neatly aligned in the same grid.

To make it a bit more obvious, here’s how the same grid looks like if you don’t use subgrid but copy the grid-template-columns declaration from the dl and use it on the div.

dl {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: auto 1fr;
}

div {
  display: inherit;
  gap: inherit;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
}
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
JavaScript
JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS
The width of each element differs because each div forms its own grid.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.


This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-10-04T00:00:00+00:00) Day 7: subgrids. Retrieved from https://www.scien.cx/2022/10/04/day-7-subgrids-2/

MLA
" » Day 7: subgrids." Manuel Matuzović | Sciencx - Tuesday October 4, 2022, https://www.scien.cx/2022/10/04/day-7-subgrids-2/
HARVARD
Manuel Matuzović | Sciencx Tuesday October 4, 2022 » Day 7: subgrids., viewed ,<https://www.scien.cx/2022/10/04/day-7-subgrids-2/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 7: subgrids. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/04/day-7-subgrids-2/
CHICAGO
" » Day 7: subgrids." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/04/day-7-subgrids-2/
IEEE
" » Day 7: subgrids." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/04/day-7-subgrids-2/. [Accessed: ]
rf:citation
» Day 7: subgrids | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/10/04/day-7-subgrids-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts