Skip to content

Instantly share code, notes, and snippets.

@Ta2Rim Ta2Rim/
Last active Mar 17, 2019

What would you like to do?
Day 17~18 Reading CSS Grid Layout Module 1 - Chapter 4~6
title date
Study Notes: CSS Grid Layout Module 1 - Chapter 4~6

Original post by tae: Day 17~18 Reading CSS Grid Layout Module 1 - Chapter 4~6

#TIL : CSS Grid Layout Module 1

Reordering and Accessibility

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.

Grid Containers

Establishing Grid Containers: the grid and inline-grid display values

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

diffrence grid between block layout

  • 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.

Sizing 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

Clamping Overly Large Grids

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;

Grid items

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 -->
        item 4
        <!-- grid items do not split around blocks -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4

When you remove text 'anonymous item 3', You can find out that inter-element white space disappears.

Grid Item Display

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 Sizing

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 |

the order property : Reordered Grid Items

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.

Grid Item Margins and Paddings

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 z-index property : Z-axis Ordering

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.

Automatic Minimum Size 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.

What's more?

Holy Grail Layout


This comment has been minimized.

Copy link
Owner Author

commented Mar 17, 2019


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.