Comments (2)
Hi Jelmer,
This behaviour is as intended. It is implied (but maybe not documented) that the grid is used within a container element that has a left and right padding equal to half the width of the grid gutters.
Imagine a situation where content is placed in a normal grid cell with padding, but underneath it you would like to place a white box with some text and padding. By placing the box in a normal cell, the text content will not be aligned with the text content of the other grid cell.
Using a collapsed cell or cells will allow you to place the box in the gutter, but still have the content of the box align with the rest ofthe content of the page by adding padding equal to the gutter size to the box itself.
I hope this explains the reasoning behind the collapsed option.
Would adding a container solve your problem or are you trying to do something different? Maybe you can create a jsfiddle / codepen page with your desired result so I can have a closer look at it?
Thanks!
from ezpz-flexbox-grid.
Sorry for not responding earlier. Thanks for explaining. I understand the reasoning but I feel like there is something missing here. When I get to a test case some day I'll post it here.
from ezpz-flexbox-grid.
Related Issues (20)
- Collapsed and expanded classes are not working
- Grid gutter collapsed not working HOT 1
- .grid--wrap breaks cells in IE11
- Use package from NPM for demo (gh-pages)
- Method to override flex-grow for direct children of .cell HOT 2
- Vertical layout HOT 1
- Optional features: gutter-collapse default is true
- Direct children of cells automatically occupy the full height of the container, this should be optional through the use of a modifier class
- Make fractions the default behaviour of the grid instead of columns
- A link on the default demo page is broken
- Update the default behaviour demo pages to better reflect the default stretching behaviour of cells
- Add HTML code examples to the demo pages
- Using grid wrap is broken in IE11 in the latest version of the grid
- Add a config option to disable the default stretch behaviour of cells
- Grid class modifier to align items to baseline
- Responsive gutter-collapse examples don't clearly show when gutters are collapsing and expanding
- Autoprefixer seems to generate a .grid > .cell else { } css selector
- When $ezpz-grid-default-content-stretch is left to default, grid breaks on IE10 HOT 2
- Breaking Change: Slash as Division HOT 5
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 ezpz-flexbox-grid.