| title | date |
|---|---|
Study Notes: CSS Grid Layout Module 1 - Chapter 4~6 |
2019-03-16 |
Original post by tae: Day 17~18 Reading CSS Grid Layout Module 1 - Chapter 4~6
Authors must use 'order' and the grid-placement properties only for visual, no logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.
name : 'display' new values : grid | inline-grid
grid - this value causes an element to generate a block-level grid container box.
inline-grid - this value causes an element to generate an inline-level grid container box.
A grid container establishes a new grid formatting context for its contents
- floats / clear do not intrude into the grid container
- grid container’s margins do not collapse with the margins of its contents.
- vertical-align has no effect on a grid item.
- the ::first-line and ::first-letter pseudo-elements do not apply to grid containers.
A grid container is sized following the rule in which contenxt it is
The max(min)-content size of a grid container is the sum of the grid container’s track sizes (including gutters) in the appropriate axis, when the grid is sized under a max(min)-content constraint
Due to memory limitation, UAs may clamp the possible size according to some rules.
- If the grid area would span outside the limited grid, its span is clamped to the last line of the limited grid.
- If the grid area would be placed completely outside the limited grid, its span must be truncated to 1 and the area repositioned into the last grid track on that side of the grid.
.grid-item {
grid-row : 500 / 1500;
grid-column : 2000 / 3000;
}
If case UA only only supported grids with at most 1000 tracks in each dimesion , UA may : 50 translate it like this.
.grid-item {
grid-row : 500 / 1001;
grid-column : 1000 / 1001;
}
the grid items of a grid container are boxes representing its in-flow contents.
grid item - Each in-flow child of a grid container. each contiguous sequence of child text runs is wrapped in an anonymous block container grid item. when it contains only white space, it's instead not rendered.
<div style="display: grid">
<!-- grid item: block child -->
<div id="item1">block</div>
<!-- grid item: floated element; floating is ignored -->
<div id="item2" style="float: left;">float</div>
<!-- grid item: anonymous block box around inline content -->
anonymous item 3
<!-- grid item: inline child -->
<span>
item 4
<!-- grid items do not split around blocks -->
<q style="display: block" id=not-an-item>item 4</q>
item 4
</span>
</div>
When you remove text 'anonymous item 3', You can find out that inter-element white space disappears.
The display value of a grid item is blockified: if the specified display of an in-flow child of an element generating a grid container is an inline-level value, it computes to its block-level equivalent.
Grid item calculations for auto widths and heights vary by their self-alignment values:
| alignment | Non-replaced Element Size | Replaced Element Size |
|---|---|---|
normal |
Fill grid area | Use intrinsic size |
stretch |
Fill grid area | Fill grid area |
start,center,etc |
'fit-content' sizing (like floats) | Use intrinsic size |
As with reordering flex items, the order property must only be used when the visual order needs to be out-of-sync with the speech and navigation order; otherwise the underlying document source should be reordered instead.
Percentage margins and paddings on grid items can be resolved against either:
- their own axis (left/right percentages resolve against width, top/bottom resolve against height)
- the inline axis (left/right/top/bottom percentages all resolve against width) A User Agent choose one of these two behaviors, so authors are aware of each UAs' different behavior. should avoid using percentages in paddings or margins on grid items entirely
The painting order of grid items is exactly the same as inline blocks
except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative).
Thus the z-index property can easily be used to control the z-axis order of grid items.
The automatic minimum size for a grid item in a given dimension is its specified size if it exists, otherwise its transferred size if that exists, else its content size.
