Assist for subgrid (a part of the CSS Grid Degree 2 specification) has simply landed in Firefox Nightly! To begin experimenting with it you’ll have to allow the characteristic by going to about:config within the browser, then trying to find subgrid. Toggle format.css.grid-template-subgrid-value.enabled and subgrid to true.
It’s nonetheless very early days, however only a couple hours of making an attempt it out have gotten me actually excited in regards to the format potentialities that this can carry. As soon as subgrid is extra extensively supported I feel it is going to open the door for some actually fascinating, artistic layouts.
Right here’s a fast demo I’ve been enjoying round with in the present day:
See the Pen Subgrid check by Michelle Barker
(@michellebarker) on CodePen.
Making a subgrid is fairly easy. A baby of a guardian grid wants show: grid, and both grid-template-columns: subgrid or grid-template-rows: subgrid. The subgrid may be on the row axis, the column axis or each. The CSS for a really fundamental instance may look one thing like this:
.grid {
show: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 200px);
}
.grid-item {
show: grid;
grid-template-columns: subgrid;
grid-column: 1 / span 2;
}
.subgrid-item {
grid-column: 2 / 3;
}There are already some docs on MDN written by Rachel Andrew in the event you’re eager to get began.
I’m wanting ahead to spending much more time experimenting and constructing some artistic layouts – and I’ll undoubtedly be writing extra about it quickly!
