Menu
So, I've been playing with css-grids in react when I noticed that grid-template-areas has a bit different syntax which might not be compatible in inline react styles. I'm not using any libraries just plain old react inline styles with style prop.
So what I'm aiming to do is similar to this.
.wrapper { display: grid; grid-template-columns: 100px 100px; grid-template-areas: "header header" "aside main" "footer footer" } .header { grid-area: header; border: 1px solid red; } .main { grid-area: main; border: 1px solid green; } .aside { grid-area: aside } .footer { grid-area: footer; border: 1px solid yellow; } Fidde: https://jsbin.com/lejaduj/2/edit?html,css,output
The layout is simple, "header" and "footer" covering all the columns and "aside" and "main" covering the half. This is just for demo purpose so I kept it simple.
Notice particularly how grid-template-areas has multiple values separated just by double quotes.
After some thought I thought we could use arrays in gridTemplateAreas in react inline styles. That didn't seem to work.
I again tried with template-literals which didn't work either.
Sandbox: https://codesandbox.io/s/zx4nokmr5l
So, is it just me that's hitting this obstacle or is this not supported yet in react?
I'd rather not use any extra library or framework in react to achieve this as much as possible.
813
The grid-template-areas property specifies areas within the grid layout. You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property. Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.
CSS Grid Template Area BasicsA CSS grid template area makes a visual representation of the grid using both columns and rows. This makes for a faster design process than when line-based placement or grid-column and grid-row values are used.
CSS Inline Level Grid CSS Grid is a two-dimensional CSS layout system. To set an HTML element into a inline-level grid container use display: inline-grid property/value. The nested elements inside this element are called grid items.
In this tutorial, I will show you how to create a single page application that uses CSS grids to create a responsive layout without using media queries. The application will be a simple Unicode character browser implemented with React.
Just use backtick strings.
gridTemplateAreas: ` 'header header' 'aside main' 'footer footer' ` 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
