Day 7: subgrids

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;
}

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;
}

This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

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/

MLA

" » Day 7: subgrids." Manuel Matuzović | Sciencx - Tuesday October 4, 2022, https://www.scien.cx/2022/10/04/day-7-subgrids/

HARVARD

Manuel Matuzović | Sciencx Tuesday October 4, 2022 » Day 7: subgrids., viewed ,<https://www.scien.cx/2022/10/04/day-7-subgrids/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 7: subgrids. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/04/day-7-subgrids/

CHICAGO

" » Day 7: subgrids." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/10/04/day-7-subgrids/

IEEE

" » Day 7: subgrids." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/10/04/day-7-subgrids/. [Accessed: ]

rf:citation

» Day 7: subgrids | Manuel Matuzović | Sciencx | 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.

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