Menu
The CSS working group member Rachel Andrews mentioned in a conference video that Sass is compatible with the new CSS grid spec. With that, does anyone know the syntax for spacing the "ASCII art" on grid-template-areas for Sass? I've since checked the Sass documentation and couldn't find anything (yet). The errors I get involve spacing. Appreciate any pointers in the community. If not, back to .css until then (: Thanks...
.wrapper
grid-template-areas: header
nav
image
lead
cta //errors occur here with ASCII art grid areas for CSS grid
.header-area
grid-area: header
.nav-area
grid-area: nav
.image
grid-area: image
.lead
grid-area: lead
.cta
grid-area: cta
545
asked Mar 22 '17 16:03
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Like tables, grid layout enables an author to align elements into columns and rows.
If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.
Mostly No. Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.
If you're layout-first, meaning you want to create the layout and then place items into it, then you'll be better off with CSS Grid. But if you're content-first, meaning you have items that you want to place into a container and space out evenly, go with Bootstrap.
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.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
