This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
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
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
This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
Manuel Matuzović | Sciencx (2022-10-04T09:38:54+00:00) Day 7: subgrids. Retrieved from https://www.scien.cx/2022/10/04/day-7-subgrids/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.