The Grid Layout specification has brought us a new method for laying out elements that is much more flexible and better suited for modern web design. Specifications evolve in this day and age of the web, as such, a few things have changed in the latest draft of the Grid Layout module.
In this article, I thought I'd look at all those changes briefly to help everyone get up to speed. If you are new to the whole grid layout concept or the details are a bit hazy, I would like to suggest that you go over my introductory grid layout article to refresh your memory.
We're Not Sure How to Handle Percentages in Margins and Padding
Before proceeding any further, I would like to tell you something unrelated — but important — that you should be aware of. The margin that you apply to adjacent grid items does not collapse. This happens because grid items are contained within the containing block of their own grid areas independent of other items.
Now, let's discuss how the spec is going to handle percentages in margins and padding. When margins or padding for different grid items are specified as percentages, they could be resolved against either the inline axis of the grid or individual grid item's own axis:
- With the inline axis — all the left/right/top/bottom percentages will be resolved against width of the grid.
- With their own axis — left and right percentages will be resolved against width, while top and bottom percentages will be resolved against height.
Continue reading %Where Things Are at in the CSS Grid Layout Working Draft%
by Nitish Kumar via SitePoint
No comments:
Post a Comment