Named CSS grid lines with SCSS
Try putting whole your CSS line to string:
$gridTplCols: "[main-start] 100px [content-start] 1fr [content-end] 100px [main-end]";
grid-template-columns: #{$gridTplCols};
What is the benefit of naming grid lines?
Short Answer
Named grid lines make the code easier to understand and maintain.
Explanation
Grid lines are the horizontal and vertical dividing lines of the grid.
A column or row is formed in between two parallel grid lines.
A grid cell is formed by intersecting grid lines.
source: W3C CSS Grid Specification
(block axis / inline axis definitions)
A grid line can be referenced numerically or by a defined name. Both rules below are the same.
#grid-container {
grid-template-rows: 2em 1fr 3em;
}
#grid-container {
grid-template-rows: [header-start] 2em [header-end body-start] 1fr [body-end footer-start] 3em [footer-end];
}
Note that lines can have multiple names.
In laying out the grid, we could just use numerical values, like this:
#grid-item-1 { grid-row: 1 / 2; } /* the header */
#grid-item-2 { grid-row: 2 / 3; } /* the content */
#grid-item-3 { grid-row: 3 / 4; } /* the footer */
Or, to make things easier to understand and maintain (think of coming back to this code a year later, or passing this code on to other developers), use meaningful names instead:
#grid-item-1 { grid-row: header-start / header-end; }
#grid-item-2 { grid-row: body-start / body-end; }
#grid-item-3 { grid-row: footer-start / footer-end; }
Code sample:
article { display: grid; grid-template-rows: [header-start] 2em [header-end body-start] 1fr [body-end footer-start] 3em [footer-end]; }
}section:nth-child(1) { grid-row: header-start / header-end; }
section:nth-child(2) { grid-row: body-start / body-end; }
section:nth-child(3) { grid-row: footer-start / footer-end;}
/* non-essential demo styles */article { grid-gap: 1px; background-color: gray; height: 100vh; border: 1px solid gray;}section { background-color: white; display: flex; align-items: center; justify-content: center;}section:nth-child(1) { background-color: aqua; }section:nth-child(2) { background-color: orange; }section:nth-child(3) { background-color: lightgreen; }body { margin: 0;}* { box-sizing: border-box; }
<article> <section>header</section> <section>body</section> <section>footer</section></article>
CSS grid & Sass
Grid template areas must be quoted. Each row is a single string:
grid-template-areas: "header header"
"main sidebar"
"footer footer"
full working demo here
edit The above example no longer works, I think due to changes in newer versions of Sass. It cannot handle the multi-line expression (issue here). Each grid row must be defined all in the same line:
.grid
display: grid
grid-template-areas: "header header" "main sidebar" "footer footer"
grid-gap: 1em
The linked demo on codepen has been updated to match. If you use the SCSS syntax (with braces & semi-colons), there isn’t this limitation.
Using sass variables in css grid template
Your layout breaks because when writing $content-foot-height / $page-sidebar-width
SASS is doing the calculation 4rem/4rem
and returns 1
, which invalidates your grid-template
property.
You can use interpolation on one or both of these variables to avoid this problem:
#{$content-foot-height} / #{$page-sidebar-width} $content-menu-width;
Different Classes separated with comma in SCSS using @for
You may take a look at @extend
. Documentation https://sass-lang.com/documentation/at-rules/extend
Input
$pc: 1000;
%margin-styles {
margin-left: $pc - 100;
}
@for $i from 1 through 12 {
.aem-Grid.aem-Grid--#{$i}>.aem-GridColumn.aem-GridColumn--offset--default--#{$i} {
@extend %margin-styles;
}
}
Output
.aem-Grid.aem-Grid--12 > .aem-GridColumn.aem-GridColumn--offset--default--12,
.aem-Grid.aem-Grid--11 > .aem-GridColumn.aem-GridColumn--offset--default--11,
.aem-Grid.aem-Grid--10 > .aem-GridColumn.aem-GridColumn--offset--default--10,
.aem-Grid.aem-Grid--9 > .aem-GridColumn.aem-GridColumn--offset--default--9,
.aem-Grid.aem-Grid--8 > .aem-GridColumn.aem-GridColumn--offset--default--8,
.aem-Grid.aem-Grid--7 > .aem-GridColumn.aem-GridColumn--offset--default--7,
.aem-Grid.aem-Grid--6 > .aem-GridColumn.aem-GridColumn--offset--default--6,
.aem-Grid.aem-Grid--5 > .aem-GridColumn.aem-GridColumn--offset--default--5,
.aem-Grid.aem-Grid--4 > .aem-GridColumn.aem-GridColumn--offset--default--4,
.aem-Grid.aem-Grid--3 > .aem-GridColumn.aem-GridColumn--offset--default--3,
.aem-Grid.aem-Grid--2 > .aem-GridColumn.aem-GridColumn--offset--default--2,
.aem-Grid.aem-Grid--1 > .aem-GridColumn.aem-GridColumn--offset--default--1 {
margin-left: 900;
}
How do I make the first row of a CSS Grid TEXT grid-area shorter?
grid-areas MUST be rectangular, which the author grid-area is messing up for the body
If you need the article text to wrap directly under the author section (I can't tell if this is what's happening in the screenshot) you cannot accomplish this with just css grid as far as I know. You can accomplish this effect by getting rid of the "author" grid-template-area, combine the author and body in a container div in the body grid-area and float the image, like so:
.article-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(5rem, auto);
grid-template-areas:
"title title title title"
"image image image image"
"author body body body"
"body body body body";
}
.article-text {
grid-area: body
}
.author-info {
float: left;
width: 100px; //or whatever width you want
}
If not, change the bottom left area name in grid-template-areas to "author", and that entire column will be blank below your author info.
Related Topics
Bootstrap Collapse Menu Disappears When Resizing Screen
Why Is CSS Calc(100%-250Px) Not Working
Line-Height Affecting Spacing Above First Line and After Last Line
Z-Index When Using ::After Under Element
Print a Header for Every Page in Google Chrome
What Does \ Mean in a CSS Hex Color Notation
React Js: How to Animate Conditionally Rendered Components
Max-Height on Border-Boxed Div with Padding Is Not Set
How to Float Paragraph Next to Image Without Wrapping the Image
Keep Image Ratio Using Max-Width and Max-Height in Ie 11
Placeholder Attribute on Input Tags for Ie
Is There a Trick to Show Arial Black in Firefox