Named CSS Grid Lines with SCSS

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.

Sample Image

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



Leave a reply



Submit