Grid Container
CSS Grid Layout + Custom Elements v1 + Shadow DOM v1
<grid-container gutter="1rem"
areas="
'a a a'
'a a a'
'a a a'
'b b e'
'c c f'
'd d .'
'g h h'
'g h h'
'g i i'
'g . .'
'j j j'
'j j j'
'j j j'
'. . .'
'k k k';
'a a a b b e'
'a a a c c f'
'a a a d d .'
'g . . . . .'
'g h h j j j'
'g h h j j j'
'g i i j j j'
'. . . . . .'
'k k k k k k' @ (min-width: 30em);
'. a a a a b b b e .'
'. a a a a c c c f .'
'. a a a a d d d . .'
'. g . . . . . . . .'
'. g h h h . j j j .'
'. g h h h . j j j .'
'. g i i i . j j j .'
'. . . . . . . . . .'
'k k k k k k k k k k' @ (min-width: 48em);
'. a a a a a b b b e f .'
'. a a a a a c c c . . .'
'. a a a a a d d d . . .'
'. g . . . . . . . . . .'
'. g h h h h . j j j . .'
'. g h h h h . j j j . .'
'. g . i i i . j j j . .'
'. . . . . . . . . . . .'
'k k k k k k k k k k k k' @ (min-width: 67.5em);">
<grid-item area="a">a</grid-item>
<grid-item area="b">b</grid-item>
<grid-item area="c">c</grid-item>
<grid-item area="d">d</grid-item>
<grid-item area="e">e</grid-item>
<grid-item area="f">f</grid-item>
<grid-item area="g">g</grid-item>
<grid-item area="h">h</grid-item>
<grid-item area="i">i</grid-item>
<grid-item area="j">j</grid-item>
<grid-item area="k">k</grid-item>
</grid-container>
<grid-container gutter="5vmin"
areas="'first second .'
'first third third'">
<grid-item area="first">First</grid-item>
<grid-item area="second">Second</grid-item>
<grid-item area="third">Third</grid-item>
<grid-item row="first-end"
column="second-end">
Fourth
</grid-item>
</grid-container>
Reference
Attributes
Areas
Creates a grid template using named
grid-items
<grid-container gutter="1rem"
areas="
'a a a a a a a a a b b b'
'a a a a a a a a a c c c'
'. . . . . . . . . c c c'
'. . . . d d d d . . . .'
">
<grid-item area="a">a</grid-item>
<grid-item area="b">b</grid-item>
<grid-item area="c">c</grid-item>
<grid-item area="d">d</grid-item>
</grid-container>
Grid
Creates a grid template using named
grid-items. Specifies dimensions for rows and columns
<grid-container gutter="1rem"
grid="
'a b' minmax(100px, 1fr)
'c b' 2fr
/ auto 70vw
">
<grid-item area="a">a</grid-item>
<grid-item area="b">b</grid-item>
<grid-item area="c">c</grid-item>
</grid-container>
<grid-container gutter="20vmin 2vw"
grid="
'a b d' 1fr
'c b .' 2fr
/ 3fr 3fr 1fr
">
<grid-item area="a">a</grid-item>
<grid-item area="b">b</grid-item>
<grid-item area="c">c</grid-item>
<grid-item area="d"
style="position: sticky; top: 0;">sticky</grid-item>
</grid-container>
<grid-container gutter="16px"
grid="auto-flow 50px / repeat(auto-fill, 300px)">
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
<grid-item></grid-item>
</grid-container>
Gutter
Specifies all gutters, or gutter between rows and gutter between columns separately
<grid-container gutter="16px"
areas="
'a b'
'c d'
">
<grid-item area="a">a</grid-item>
<grid-item area="b">b</grid-item>
<grid-item area="c">c</grid-item>
<grid-item area="d">d</grid-item>
</grid-container>
<grid-container gutter="5vh 10vw"
areas="
'a b'
'c d'
">
<grid-item area="a">a</grid-item>
<grid-item area="b">b</grid-item>
<grid-item area="c">c</grid-item>
<grid-item area="d">d</grid-item>
</grid-container>
Media Queries
Declarative Media Queries
<grid-container gutter="
5px;
20px @ (min-width: 30em)"
areas="
'a b'
'c d';
'a a a a a a a a a b b b'
'a a a a a a a a a c c c'
'. . . . . . . . . c c c'
'. . . . d d d d . . . .'
@ (min-width: 30em);
'a a a a a a b b b b b b'
'a a a a a a . . c c c c'
'. . . . . . . . c c c c'
'. . d d d d d d d d . .'
@ (min-width: 48em)
">
<grid-item area="a">a</grid-item>
<grid-item area="b">b</grid-item>
<grid-item area="c">c</grid-item>
<grid-item area="d">d</grid-item>
</grid-container>
<grid-container gutter="5vmin"
areas="'first second .'
'first third third'">
<grid-item area="first">First</grid-item>
<grid-item area="second">Second</grid-item>
<grid-item area="third">Third</grid-item>
<grid-item row="first-end;
first-start @ (min-width: 48em)"
column="second-end">
Fourth
</grid-item>
</grid-container>