I was assisting my associate begin with a CSS Grid design lately and also he asked me if there was a method of countering grid things about each other, e.g “If column 1 finishes at line x, make column 2 beginning at line x + n“. There isn’t specifically a method of doing this natively with Grid, you would certainly require to clearly place the things in this instance. Yet it struck me that this might be an usage instance for CSS variables, or personalized buildings.
Formerly I have actually contrasted the distinction in between CSS variables and also Sass (or various other preprocessor) variables as comparable to the distinction in between const and also allow in JavaScript. CSS variables are much more like allow as they are vibrant, not fixed. Yet that example is a little deceptive, as there is a critical distinction: With CSS variables there is no chance of accessing an in your area scoped variable beyond its extent.
An instance:
my-component {
-- bgColor: red;
}
/ * This will certainly not function, the variable is undefined */
. another-component {
background-color: var(-- bgColor);.
}
Consequently, if we intend to place the things on our grid design about each other, we require to specify those variables on the moms and dad grid container to make sure that they will certainly be acquired by the youngsters.
grid {
-- start1: 1;.
-- end1: 4;.
-- start2: calc( var(-- end1) + 2);.
}
. grid __ thing: first-child {
grid-column: var(-- start1)/ var(-- end1);.
}
. grid __ thing: nth-child( 2) {
grid-column: var(-- start2)/ 12;.
}
The beginning line of the 2nd grid __ thing will certainly constantly be 2 grid lines after completion line of the initial thing. If we have a 2nd variation of our grid part where we intend to alter the setting of the initial grid __ thing after that the beginning of the 2nd grid kid will certainly be upgraded appropriately:
grid-- 2 {
-- end1: 6:.
}
Right here’s a trial of the principle at work:
One caution below is that we require to view that the setting of our initial grid thing does not create the 2nd thing to be placed past the complete variety of columns defined in our grid-template-columns residential or commercial property. In this certain instance I’m hard-coding the thing’s end line, to make sure that’s not mosting likely to be a concern. Yet the initial thing might still press its beginning line over our column matter, to make sure that’s something to look out for. Variables might be incredibly effective with if declarations, however yet we do not have that ability in CSS!
We do not require to adhere to simply 2 things either– theoretically, we might have lots of things that are located about each various other. Right here’s a somewhat much more intricate demonstration, where we’re putting things about each other on the column and also row axis:
It’s perhaps to do a comparable point with Sass variables, however the benefit with CSS variables is the reusability of our code for various variations of the exact same part. If we had numerous variations after that we ‘d just require to upgrade a couple of variables, as opposed to drawing up the grid affirmation around once more.
There are certainly some opportunities below, despite the fact that I have not serviced any type of real-world usage instances yet where this strategy would certainly be better to by hand putting things at various grid lines. I would certainly be interested to see if this approach of positioning exercises for any person, so if you attempt it out do allow me understand!
