Comments (3)
@RolandNaijuka / @pnevares is the issue that you are seeing the div classes nested within the parent like so?
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
.div1 { grid-area: 1 / 1 / 4 / 5; }
.div2 { grid-area: 2 / 5 / 3 / 6; }
.div3 { grid-area: 2 / 5 / 4 / 6; }
}
are you preferring to see a closed parent with subsequent div line items? like this:
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 4 / 5; }
.div2 { grid-area: 2 / 5 / 3 / 6; }
.div3 { grid-area: 2 / 5 / 4 / 6; }
from cssgridgenerator.
I had noticed this but immediately recognized it as Sass/Less-style nested selectors. But I also understand that it's not accessible to anybody unfamiliar with those tools. Intentional or not I agree that this behavior should change.
from cssgridgenerator.
Correct, this is SCSS syntax. If you've never tried it, you should check it out. Updated.
from cssgridgenerator.
Related Issues (20)
- Make the generated code visible from the main screen so that learners can see how it works
- add width, height and a border for display the Grid in the filters
- Reset Grid Button Does not take affect
- SCSS mode
- Output Parent names
- Possibility to upload a background image to align grid with my design HOT 3
- Displays column and row numbers (Request feature)
- Switch to column-gap and row-gap HOT 1
- Output CSS + HTML in "Your Grid Code" window HOT 2
- Transparent Div after ".div21" HOT 5
- If fr value is same for grid-template-columns & grid-template-rows then why not use repeat! HOT 2
- "Reset Grid" does not work HOT 2
- Modal is not scrollable when it's taller than screen (desktop)
- Missing curly brackets on parent div
- Should Reset Grid button reset row/column/gaps to original values. HOT 1
- Usability the cards HOT 1
- Seen this one? HOT 1
- Problems with single column HOT 3
- Consider using grid-template-areas HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cssgridgenerator.