cc8944c085
NPOTB DONTBUILD The Overview.html file was generated by this command: curl https://api.csswg.org/bikeshed/ -F file=@layout/docs/css-grid-3/Overview.bs -F force=1 > layout/docs/css-grid-3/Overview.html Differential Revision: https://phabricator.services.mozilla.com/D90302
3365 lines
180 KiB
HTML
3365 lines
180 KiB
HTML
<!doctype html><html lang="en">
|
||
<head>
|
||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||
<title>CSS Masonry Layout Module</title>
|
||
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
|
||
<style data-fill-with="stylesheet">/******************************************************************************
|
||
* Style sheet for the W3C specifications *
|
||
*
|
||
* Special classes handled by this style sheet include:
|
||
*
|
||
* Indices
|
||
* - .toc for the Table of Contents (<ol class="toc">)
|
||
* + <span class="secno"> for the section numbers
|
||
* - #toc for the Table of Contents (<nav id="toc">)
|
||
* - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
|
||
* - table.index for Index Tables (e.g. for properties or elements)
|
||
*
|
||
* Structural Markup
|
||
* - table.data for general data tables
|
||
* -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
|
||
* -> use <table class='complex data'> for extra-complex tables
|
||
* -> use <td class='long'> for paragraph-length cell content
|
||
* -> use <td class='pre'> when manual line breaks/indentation would help readability
|
||
* - dl.switch for switch statements
|
||
* - ol.algorithm for algorithms (helps to visualize nesting)
|
||
* - .figure and .caption (HTML4) and figure and figcaption (HTML5)
|
||
* -> .sidefigure for right-floated figures
|
||
* - ins/del
|
||
*
|
||
* Code
|
||
* - pre and code
|
||
*
|
||
* Special Sections
|
||
* - .note for informative notes (div, p, span, aside, details)
|
||
* - .example for informative examples (div, p, pre, span)
|
||
* - .issue for issues (div, p, span)
|
||
* - .assertion for assertions (div, p, span)
|
||
* - .advisement for loud normative statements (div, p, strong)
|
||
* - .annoying-warning for spec obsoletion notices (div, aside, details)
|
||
*
|
||
* Definition Boxes
|
||
* - pre.def for WebIDL definitions
|
||
* - table.def for tables that define other entities (e.g. CSS properties)
|
||
* - dl.def for definition lists that define other entitles (e.g. HTML elements)
|
||
*
|
||
* Numbering
|
||
* - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
|
||
* - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
|
||
* - ::before styled for CSS-generated issue/example/figure numbers:
|
||
* -> Documents wishing to use this only need to add
|
||
* figcaption::before,
|
||
* .caption::before { content: "Figure " counter(figure) " "; }
|
||
* .example::before { content: "Example " counter(example) " "; }
|
||
* .issue::before { content: "Issue " counter(issue) " "; }
|
||
*
|
||
* Header Stuff (ignore, just don't conflict with these classes)
|
||
* - .head for the header
|
||
* - .copyright for the copyright
|
||
*
|
||
* Miscellaneous
|
||
* - .overlarge for things that should be as wide as possible, even if
|
||
* that overflows the body text area. This can be used on an item or
|
||
* on its container, depending on the effect desired.
|
||
* Note that this styling basically doesn't help at all when printing,
|
||
* since A4 paper isn't much wider than the max-width here.
|
||
* It's better to design things to fit into a narrower measure if possible.
|
||
* - js-added ToC jump links (see fixup.js)
|
||
*
|
||
******************************************************************************/
|
||
|
||
/* color variables included separately for reliability */
|
||
|
||
/******************************************************************************/
|
||
/* Body */
|
||
/******************************************************************************/
|
||
|
||
html {
|
||
color: black;
|
||
color: var(--text);
|
||
background-color: white;
|
||
background-color: var(--bg);
|
||
}
|
||
|
||
body {
|
||
counter-reset: example figure issue;
|
||
|
||
/* Layout */
|
||
max-width: 50em; /* limit line length to 50em for readability */
|
||
margin: 0 auto; /* center text within page */
|
||
padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
|
||
padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag */
|
||
|
||
/* Typography */
|
||
line-height: 1.5;
|
||
font-family: sans-serif;
|
||
widows: 2;
|
||
orphans: 2;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
|
||
background: transparent top left fixed no-repeat;
|
||
background-size: 25px auto;
|
||
}
|
||
|
||
|
||
/******************************************************************************/
|
||
/* Front Matter & Navigation */
|
||
/******************************************************************************/
|
||
|
||
/** Header ********************************************************************/
|
||
|
||
div.head { margin-bottom: 1em }
|
||
div.head hr { border-style: solid; }
|
||
|
||
div.head h1 {
|
||
font-weight: bold;
|
||
margin: 0 0 .1em;
|
||
font-size: 220%;
|
||
}
|
||
|
||
div.head h2 { margin-bottom: 1.5em;}
|
||
|
||
/** W3C Logo ******************************************************************/
|
||
|
||
.head .logo {
|
||
float: right;
|
||
margin: 0.4rem 0 0.2rem .4rem;
|
||
}
|
||
|
||
.head img[src*="logos/W3C"] {
|
||
display: block;
|
||
border: solid #1a5e9a;
|
||
border: solid var(--logo-bg);
|
||
border-width: .65rem .7rem .6rem;
|
||
border-radius: .4rem;
|
||
background: #1a5e9a;
|
||
background: var(--logo-bg);
|
||
color: white;
|
||
color: var(--logo-text);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.head a:hover > img[src*="logos/W3C"],
|
||
.head a:focus > img[src*="logos/W3C"] {
|
||
opacity: .8;
|
||
}
|
||
|
||
.head a:active > img[src*="logos/W3C"] {
|
||
background: #c00;
|
||
background: var(--logo-active-bg);
|
||
border-color: #c00;
|
||
border-color: var(--logo-active-bg);
|
||
}
|
||
|
||
/* see also additional rules in Link Styling section */
|
||
|
||
/** Copyright *****************************************************************/
|
||
|
||
p.copyright,
|
||
p.copyright small { font-size: small }
|
||
|
||
/** Back to Top / ToC Toggle **************************************************/
|
||
|
||
@media print {
|
||
#toc-nav {
|
||
display: none;
|
||
}
|
||
}
|
||
@media not print {
|
||
#toc-nav {
|
||
position: fixed;
|
||
z-index: 2;
|
||
bottom: 0; left: 0;
|
||
margin: 0;
|
||
min-width: 1.33em;
|
||
border-top-right-radius: 2rem;
|
||
box-shadow: 0 0 2px;
|
||
font-size: 1.5em;
|
||
}
|
||
#toc-nav > a {
|
||
display: block;
|
||
white-space: nowrap;
|
||
|
||
height: 1.33em;
|
||
padding: .1em 0.3em;
|
||
margin: 0;
|
||
|
||
box-shadow: 0 0 2px;
|
||
border: none;
|
||
border-top-right-radius: 1.33em;
|
||
|
||
color: #707070;
|
||
color: var(--tocnav-normal-text);
|
||
background: white;
|
||
background: var(--tocnav-normal-bg);
|
||
}
|
||
#toc-nav > a:hover,
|
||
#toc-nav > a:focus {
|
||
color: black;
|
||
color: var(--tocnav-hover-text);
|
||
background: #f8f8f8;
|
||
background: var(--tocnav-hover-bg);
|
||
}
|
||
#toc-nav > a:active {
|
||
color: #c00;
|
||
color: var(--tocnav-active-text);
|
||
background: white;
|
||
background: var(--tocnav-active-bg);
|
||
}
|
||
|
||
#toc-nav > #toc-jump {
|
||
padding-bottom: 2em;
|
||
margin-bottom: -1.9em;
|
||
}
|
||
|
||
/* statusbar gets in the way on keyboard focus; remove once browsers fix */
|
||
#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
|
||
padding-bottom: 1.5rem;
|
||
}
|
||
|
||
#toc-nav:not(:hover) > a:not(:focus) > span + span {
|
||
/* Ideally this uses :focus-within on #toc-nav */
|
||
display: none;
|
||
}
|
||
#toc-nav > a > span + span {
|
||
padding-right: 0.2em;
|
||
}
|
||
}
|
||
|
||
/** ToC Sidebar ***************************************************************/
|
||
|
||
/* Floating sidebar */
|
||
@media screen {
|
||
body.toc-sidebar #toc {
|
||
position: fixed;
|
||
top: 0; bottom: 0;
|
||
left: 0;
|
||
width: 23.5em;
|
||
max-width: 80%;
|
||
max-width: calc(100% - 2em - 26px);
|
||
overflow: auto;
|
||
padding: 0 1em;
|
||
padding-left: 42px;
|
||
padding-left: calc(1em + 26px);
|
||
color: black;
|
||
color: var(--tocsidebar-text);
|
||
background: inherit;
|
||
background-color: #f7f8f9;
|
||
background-color: var(--tocsidebar-bg);
|
||
z-index: 1;
|
||
box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
|
||
box-shadow: -.1em 0 .25em var(--tocsidebar-shadow) inset;
|
||
}
|
||
body.toc-sidebar #toc h2 {
|
||
margin-top: .8rem;
|
||
font-variant: small-caps;
|
||
font-variant: all-small-caps;
|
||
text-transform: lowercase;
|
||
font-weight: bold;
|
||
color: gray;
|
||
color: hsla(203,20%,40%,.7);
|
||
color: var(--tocsidebar-heading-text);
|
||
}
|
||
body.toc-sidebar #toc-jump:not(:focus) {
|
||
width: 0;
|
||
height: 0;
|
||
padding: 0;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
/* Hide main scroller when only the ToC is visible anyway */
|
||
@media screen and (max-width: 28em) {
|
||
body.toc-sidebar {
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
/* Sidebar with its own space */
|
||
@media screen and (min-width: 78em) {
|
||
body:not(.toc-inline) #toc {
|
||
position: fixed;
|
||
top: 0; bottom: 0;
|
||
left: 0;
|
||
width: 23.5em;
|
||
overflow: auto;
|
||
padding: 0 1em;
|
||
padding-left: 42px;
|
||
padding-left: calc(1em + 26px);
|
||
color: black;
|
||
color: var(--tocsidebar-text);
|
||
background: inherit;
|
||
background-color: #f7f8f9;
|
||
background-color: var(--tocsidebar-bg);
|
||
z-index: 1;
|
||
box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
|
||
box-shadow: -.1em 0 .25em var(--tocsidebar-shadow) inset;
|
||
}
|
||
body:not(.toc-inline) #toc h2 {
|
||
margin-top: .8rem;
|
||
font-variant: small-caps;
|
||
font-variant: all-small-caps;
|
||
text-transform: lowercase;
|
||
font-weight: bold;
|
||
color: gray;
|
||
color: hsla(203,20%,40%,.7);
|
||
color: var(--tocsidebar-heading-text);
|
||
}
|
||
|
||
body:not(.toc-inline) {
|
||
padding-left: 29em;
|
||
}
|
||
/* See also Overflow section at the bottom */
|
||
|
||
body:not(.toc-inline) #toc-jump:not(:focus) {
|
||
width: 0;
|
||
height: 0;
|
||
padding: 0;
|
||
position: absolute;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
@media screen and (min-width: 90em) {
|
||
body:not(.toc-inline) {
|
||
margin: 0 4em;
|
||
}
|
||
}
|
||
|
||
/******************************************************************************/
|
||
/* Sectioning */
|
||
/******************************************************************************/
|
||
|
||
/** Headings ******************************************************************/
|
||
|
||
h1, h2, h3, h4, h5, h6, dt {
|
||
page-break-after: avoid;
|
||
page-break-inside: avoid;
|
||
font: 100% sans-serif; /* Reset all font styling to clear out UA styles */
|
||
font-family: inherit; /* Inherit the font family. */
|
||
line-height: 1.2; /* Keep wrapped headings compact */
|
||
hyphens: manual; /* Hyphenated headings look weird */
|
||
}
|
||
|
||
h2, h3, h4, h5, h6 {
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
h1, h2, h3 {
|
||
color: #005A9C;
|
||
color: var(--heading-text);
|
||
}
|
||
|
||
h1 { font-size: 170%; }
|
||
h2 { font-size: 140%; }
|
||
h3 { font-size: 120%; }
|
||
h4 { font-weight: bold; }
|
||
h5 { font-style: italic; }
|
||
h6 { font-variant: small-caps; }
|
||
dt { font-weight: bold; }
|
||
|
||
/** Subheadings ***************************************************************/
|
||
|
||
h1 + h2,
|
||
#subtitle {
|
||
/* #subtitle is a subtitle in an H2 under the H1 */
|
||
margin-top: 0;
|
||
}
|
||
h2 + h3,
|
||
h3 + h4,
|
||
h4 + h5,
|
||
h5 + h6 {
|
||
margin-top: 1.2em; /* = 1 x line-height */
|
||
}
|
||
|
||
/** Section divider ***********************************************************/
|
||
|
||
:not(.head) > :not(.head) + hr {
|
||
font-size: 1.5em;
|
||
text-align: center;
|
||
margin: 1em auto;
|
||
height: auto;
|
||
color: black;
|
||
color: var(--hr-text);
|
||
border: transparent solid 0;
|
||
background: transparent;
|
||
}
|
||
:not(.head) > hr::before {
|
||
content: "\2727\2003\2003\2727\2003\2003\2727";
|
||
}
|
||
|
||
/******************************************************************************/
|
||
/* Paragraphs and Lists */
|
||
/******************************************************************************/
|
||
|
||
p {
|
||
margin: 1em 0;
|
||
}
|
||
|
||
dd > p:first-child,
|
||
li > p:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
ul, ol {
|
||
margin-left: 0;
|
||
padding-left: 2em;
|
||
}
|
||
|
||
li {
|
||
margin: 0.25em 0 0.5em;
|
||
padding: 0;
|
||
}
|
||
|
||
dl dd {
|
||
margin: 0 0 .5em 2em;
|
||
}
|
||
|
||
.head dd + dd { /* compact for header */
|
||
margin-top: -.5em;
|
||
}
|
||
|
||
/* Style for algorithms */
|
||
ol.algorithm ol:not(.algorithm),
|
||
.algorithm > ol ol:not(.algorithm) {
|
||
border-left: 0.5em solid #DEF;
|
||
border-left: 0.5em solid var(--algo-border);
|
||
}
|
||
|
||
/* Put nice boxes around each algorithm. */
|
||
[data-algorithm]:not(.heading) {
|
||
padding: .5em;
|
||
border: thin solid #ddd;
|
||
border: thin solid var(--algo-border);
|
||
border-radius: .5em;
|
||
margin: .5em calc(-0.5em - 1px);
|
||
}
|
||
[data-algorithm]:not(.heading) > :first-child {
|
||
margin-top: 0;
|
||
}
|
||
[data-algorithm]:not(.heading) > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* Style for switch/case <dl>s */
|
||
dl.switch > dd > ol.only,
|
||
dl.switch > dd > .only > ol {
|
||
margin-left: 0;
|
||
}
|
||
dl.switch > dd > ol.algorithm,
|
||
dl.switch > dd > .algorithm > ol {
|
||
margin-left: -2em;
|
||
}
|
||
dl.switch {
|
||
padding-left: 2em;
|
||
}
|
||
dl.switch > dt {
|
||
text-indent: -1.5em;
|
||
margin-top: 1em;
|
||
}
|
||
dl.switch > dt + dt {
|
||
margin-top: 0;
|
||
}
|
||
dl.switch > dt::before {
|
||
content: '\21AA';
|
||
padding: 0 0.5em 0 0;
|
||
display: inline-block;
|
||
width: 1em;
|
||
text-align: right;
|
||
line-height: 0.5em;
|
||
}
|
||
|
||
/** Terminology Markup ********************************************************/
|
||
|
||
|
||
/******************************************************************************/
|
||
/* Inline Markup */
|
||
/******************************************************************************/
|
||
|
||
/** Terminology Markup ********************************************************/
|
||
dfn { /* Defining instance */
|
||
font-weight: bolder;
|
||
}
|
||
a > i { /* Instance of term */
|
||
font-style: normal;
|
||
}
|
||
dt dfn code, code.idl {
|
||
font-size: medium;
|
||
}
|
||
dfn var {
|
||
font-style: normal;
|
||
}
|
||
|
||
/** Change Marking ************************************************************/
|
||
|
||
del {
|
||
color: red;
|
||
color: var(--del-text);
|
||
background: transparent;
|
||
background: var(--del-bg);
|
||
text-decoration: line-through;
|
||
}
|
||
ins {
|
||
color: #080;
|
||
color: var(--ins-text);
|
||
background: transparent;
|
||
background: var(--ins-bg);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/** Miscellaneous improvements to inline formatting ***************************/
|
||
|
||
sup {
|
||
vertical-align: super;
|
||
font-size: 80%
|
||
}
|
||
|
||
/******************************************************************************/
|
||
/* Code */
|
||
/******************************************************************************/
|
||
|
||
/** General monospace/pre rules ***********************************************/
|
||
|
||
pre, code, samp {
|
||
font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
|
||
font-size: .9em;
|
||
hyphens: none;
|
||
text-transform: none;
|
||
text-align: left;
|
||
text-align: start;
|
||
font-variant: normal;
|
||
orphans: 3;
|
||
widows: 3;
|
||
page-break-before: avoid;
|
||
}
|
||
pre code,
|
||
code code {
|
||
font-size: 100%;
|
||
}
|
||
|
||
pre {
|
||
margin-top: 1em;
|
||
margin-bottom: 1em;
|
||
overflow: auto;
|
||
}
|
||
|
||
/** Inline Code fragments *****************************************************/
|
||
|
||
/* Do something nice. */
|
||
|
||
/******************************************************************************/
|
||
/* Links */
|
||
/******************************************************************************/
|
||
|
||
/** General Hyperlinks ********************************************************/
|
||
|
||
/* We hyperlink a lot, so make it less intrusive */
|
||
a[href] {
|
||
color: #034575;
|
||
color: var(--a-normal-text);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid #707070;
|
||
border-bottom: 1px solid var(--a-normal-underline);
|
||
/* Need a bit of extending for it to look okay */
|
||
padding: 0 1px 0;
|
||
margin: 0 -1px 0;
|
||
}
|
||
a:visited {
|
||
color: #034575;
|
||
color: var(--a-visited-text);
|
||
border-bottom-color: #bbb;
|
||
border-bottom-color: var(--a-visited-underline);
|
||
}
|
||
|
||
/* Use distinguishing colors when user is interacting with the link */
|
||
a[href]:focus,
|
||
a[href]:hover {
|
||
background: #f8f8f8;
|
||
background: rgba(75%, 75%, 75%, .25);
|
||
background: var(--a-hover-bg);
|
||
border-bottom-width: 3px;
|
||
margin-bottom: -2px;
|
||
}
|
||
a[href]:active {
|
||
color: #c00;
|
||
color: var(--a-active-text);
|
||
border-color: #c00;
|
||
border-color: var(--a-active-underline);
|
||
}
|
||
|
||
/* Backout above styling for W3C logo */
|
||
.head .logo,
|
||
.head .logo a {
|
||
border: none;
|
||
text-decoration: none;
|
||
background: transparent;
|
||
}
|
||
|
||
/******************************************************************************/
|
||
/* Images */
|
||
/******************************************************************************/
|
||
|
||
img {
|
||
border-style: none;
|
||
}
|
||
|
||
img, svg {
|
||
/* Intentionally not color-scheme aware. */
|
||
background: white;
|
||
}
|
||
|
||
/* For autogen numbers, add
|
||
.caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
|
||
*/
|
||
|
||
figure, .figure, .sidefigure {
|
||
page-break-inside: avoid;
|
||
text-align: center;
|
||
margin: 2.5em 0;
|
||
}
|
||
.figure img, .sidefigure img, figure img,
|
||
.figure object, .sidefigure object, figure object {
|
||
max-width: 100%;
|
||
margin: auto;
|
||
height: auto;
|
||
}
|
||
.figure pre, .sidefigure pre, figure pre {
|
||
text-align: left;
|
||
display: table;
|
||
margin: 1em auto;
|
||
}
|
||
.figure table, figure table {
|
||
margin: auto;
|
||
}
|
||
@media screen and (min-width: 20em) {
|
||
.sidefigure {
|
||
float: right;
|
||
width: 50%;
|
||
margin: 0 0 0.5em 0.5em
|
||
}
|
||
}
|
||
.caption, figcaption, caption {
|
||
font-style: italic;
|
||
font-size: 90%;
|
||
}
|
||
.caption::before, figcaption::before, figcaption > .marker {
|
||
font-weight: bold;
|
||
}
|
||
.caption, figcaption {
|
||
counter-increment: figure;
|
||
}
|
||
|
||
/* DL list is indented 2em, but figure inside it is not */
|
||
dd > .figure, dd > figure { margin-left: -2em }
|
||
|
||
/******************************************************************************/
|
||
/* Colored Boxes */
|
||
/******************************************************************************/
|
||
|
||
.issue, .note, .example, .assertion, .advisement, blockquote {
|
||
padding: .5em;
|
||
border: .5em;
|
||
border-left-style: solid;
|
||
page-break-inside: avoid;
|
||
}
|
||
span.issue, span.note {
|
||
padding: .1em .5em .15em;
|
||
border-right-style: solid;
|
||
}
|
||
|
||
.issue,
|
||
.note,
|
||
.example,
|
||
.advisement,
|
||
.assertion,
|
||
blockquote {
|
||
margin: 1em auto;
|
||
}
|
||
.note > p:first-child,
|
||
.issue > p:first-child,
|
||
blockquote > :first-child {
|
||
margin-top: 0;
|
||
}
|
||
blockquote > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
|
||
.issue::before, .issue > .marker,
|
||
.example::before, .example > .marker,
|
||
.note::before, .note > .marker,
|
||
details.note > summary > .marker {
|
||
text-transform: uppercase;
|
||
padding-right: 1em;
|
||
}
|
||
|
||
.example::before, .example > .marker {
|
||
display: block;
|
||
padding-right: 0em;
|
||
}
|
||
|
||
/** Blockquotes ***************************************************************/
|
||
|
||
blockquote {
|
||
border-color: silver;
|
||
border-color: var(--blockquote-border);
|
||
background: transparent;
|
||
background: var(--blockquote-bg);
|
||
color: currentcolor;
|
||
color: var(--blockquote-text);
|
||
}
|
||
|
||
/** Open issue ****************************************************************/
|
||
|
||
.issue {
|
||
border-color: #e05252;
|
||
border-color: var(--issue-border);
|
||
background: #fbe9e9;
|
||
background: var(--issue-bg);
|
||
color: black;
|
||
color: var(--issue-text);
|
||
counter-increment: issue;
|
||
overflow: auto;
|
||
}
|
||
.issue::before, .issue > .marker {
|
||
color: #831616;
|
||
color: var(--issueheading-text);
|
||
}
|
||
/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
|
||
or use class="marker" to mark up the issue number in source. */
|
||
|
||
/** Example *******************************************************************/
|
||
|
||
.example {
|
||
border-color: #e0cb52;
|
||
border-color: var(--example-border);
|
||
background: #fcfaee;
|
||
background: var(--example-bg);
|
||
color: black;
|
||
color: var(--example-text);
|
||
counter-increment: example;
|
||
overflow: auto;
|
||
clear: both;
|
||
}
|
||
.example::before, .example > .marker {
|
||
color: #574b0f;
|
||
color: var(--exampleheading-text);
|
||
}
|
||
/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
|
||
or use class="marker" to mark up the example number in source. */
|
||
|
||
/** Non-normative Note ********************************************************/
|
||
|
||
.note {
|
||
border-color: #52e052;
|
||
border-color: var(--note-border);
|
||
background: #e9fbe9;
|
||
background: var(--note-bg);
|
||
color: black;
|
||
color: var(--note-text);
|
||
overflow: auto;
|
||
}
|
||
|
||
.note::before, .note > .marker,
|
||
details.note > summary {
|
||
color: hsl(120, 70%, 30%);
|
||
color: var(--noteheading-text);
|
||
}
|
||
/* Add .note::before { content: "Note "; } for autogen label,
|
||
or use class="marker" to mark up the label in source. */
|
||
|
||
details.note[open] > summary {
|
||
border-bottom: 1px silver solid;
|
||
border-bottom: 1px var(--notesummary-underline) solid;
|
||
}
|
||
|
||
/** Assertion Box *************************************************************/
|
||
/* for assertions in algorithms */
|
||
|
||
.assertion {
|
||
border-color: #AAA;
|
||
border-color: var(--assertion-border);
|
||
background: #EEE;
|
||
background: var(--assertion-bg);
|
||
color: black;
|
||
color: var(--assertion-text);
|
||
}
|
||
|
||
/** Advisement Box ************************************************************/
|
||
/* for attention-grabbing normative statements */
|
||
|
||
.advisement {
|
||
border-color: orange;
|
||
border-color: var(--advisement-border);
|
||
border-style: none solid;
|
||
background: #fec;
|
||
background: var(--advisement-bg);
|
||
color: black;
|
||
color: var(--advisement-text);
|
||
}
|
||
strong.advisement {
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
.advisement::before, .advisement > .marker {
|
||
color: #b35f00;
|
||
color: var(--advisementheading-text);
|
||
}
|
||
|
||
/** Spec Obsoletion Notice ****************************************************/
|
||
/* obnoxious obsoletion notice for older/abandoned specs. */
|
||
|
||
details {
|
||
display: block;
|
||
}
|
||
summary {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.annoying-warning:not(details),
|
||
details.annoying-warning:not([open]) > summary,
|
||
details.annoying-warning[open] {
|
||
background: hsla(40,100%,50%,0.95);
|
||
background: var(--warning-bg);
|
||
color: black;
|
||
color: var(--warning-text);
|
||
padding: .75em 1em;
|
||
border: red;
|
||
border: var(--warning-border);
|
||
border-style: solid none;
|
||
box-shadow: 0 2px 8px black;
|
||
text-align: center;
|
||
}
|
||
.annoying-warning :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
@media not print {
|
||
details.annoying-warning[open] {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 2em;
|
||
z-index: 1000;
|
||
}
|
||
}
|
||
|
||
details.annoying-warning:not([open]) > summary {
|
||
text-align: center;
|
||
}
|
||
|
||
/** Entity Definition Boxes ***************************************************/
|
||
|
||
.def {
|
||
padding: .5em 1em;
|
||
background: #def;
|
||
background: var(--def-bg);
|
||
margin: 1.2em 0;
|
||
border-left: 0.5em solid #8ccbf2;
|
||
border-left: 0.5em solid var(--def-border);
|
||
color: black;
|
||
color: var(--def-text);
|
||
}
|
||
|
||
/******************************************************************************/
|
||
/* Tables */
|
||
/******************************************************************************/
|
||
|
||
th, td {
|
||
text-align: left;
|
||
text-align: start;
|
||
}
|
||
|
||
/** Property/Descriptor Definition Tables *************************************/
|
||
|
||
table.def {
|
||
/* inherits .def box styling, see above */
|
||
width: 100%;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
table.def td,
|
||
table.def th {
|
||
padding: 0.5em;
|
||
vertical-align: baseline;
|
||
border-bottom: 1px solid #bbd7e9;
|
||
border-bottom: 1px solid var(--defrow-border);
|
||
}
|
||
|
||
table.def > tbody > tr:last-child th,
|
||
table.def > tbody > tr:last-child td {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
table.def th {
|
||
font-style: italic;
|
||
font-weight: normal;
|
||
padding-left: 1em;
|
||
width: 3em;
|
||
}
|
||
|
||
/* For when values are extra-complex and need formatting for readability */
|
||
table td.pre {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* A footnote at the bottom of a def table */
|
||
table.def td.footnote {
|
||
padding-top: 0.6em;
|
||
}
|
||
table.def td.footnote::before {
|
||
content: " ";
|
||
display: block;
|
||
height: 0.6em;
|
||
width: 4em;
|
||
border-top: thin solid;
|
||
}
|
||
|
||
/** Data tables (and properly marked-up index tables) *************************/
|
||
/*
|
||
<table class="data"> highlights structural relationships in a table
|
||
when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)
|
||
|
||
Use class="complex data" for particularly complicated tables --
|
||
(This will draw more lines: busier, but clearer.)
|
||
|
||
Use class="long" on table cells with paragraph-like contents
|
||
(This will adjust text alignment accordingly.)
|
||
Alternately use class="longlastcol" on tables, to have the last column assume "long".
|
||
*/
|
||
|
||
table {
|
||
word-wrap: normal;
|
||
overflow-wrap: normal;
|
||
hyphens: manual;
|
||
}
|
||
|
||
table.data,
|
||
table.index {
|
||
margin: 1em auto;
|
||
border-collapse: collapse;
|
||
border: hidden;
|
||
width: 100%;
|
||
}
|
||
table.data caption,
|
||
table.index caption {
|
||
max-width: 50em;
|
||
margin: 0 auto 1em;
|
||
}
|
||
|
||
table.data td, table.data th,
|
||
table.index td, table.index th {
|
||
padding: 0.5em 1em;
|
||
border-width: 1px;
|
||
border-color: silver;
|
||
border-color: var(--datacell-border);
|
||
border-top-style: solid;
|
||
}
|
||
|
||
table.data thead td:empty {
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
table.data thead,
|
||
table.index thead,
|
||
table.data tbody,
|
||
table.index tbody {
|
||
border-bottom: 2px solid;
|
||
}
|
||
|
||
table.data colgroup,
|
||
table.index colgroup {
|
||
border-left: 2px solid;
|
||
}
|
||
|
||
table.data tbody th:first-child,
|
||
table.index tbody th:first-child {
|
||
border-right: 2px solid;
|
||
border-top: 1px solid silver;
|
||
border-top: 1px solid var(--datacell-border);
|
||
padding-right: 1em;
|
||
}
|
||
|
||
table.data th[colspan],
|
||
table.data td[colspan] {
|
||
text-align: center;
|
||
}
|
||
|
||
table.complex.data th,
|
||
table.complex.data td {
|
||
border: 1px solid silver;
|
||
border: 1px solid var(--datacell-border);
|
||
text-align: center;
|
||
}
|
||
|
||
table.data.longlastcol td:last-child,
|
||
table.data td.long {
|
||
vertical-align: baseline;
|
||
text-align: left;
|
||
}
|
||
|
||
table.data img {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
|
||
/*
|
||
Alternate table alignment rules
|
||
|
||
table.data,
|
||
table.index {
|
||
text-align: center;
|
||
}
|
||
|
||
table.data thead th[scope="row"],
|
||
table.index thead th[scope="row"] {
|
||
text-align: right;
|
||
}
|
||
|
||
table.data tbody th:first-child,
|
||
table.index tbody th:first-child {
|
||
text-align: right;
|
||
}
|
||
|
||
Possible extra rowspan handling
|
||
|
||
table.data tbody th[rowspan]:not([rowspan='1']),
|
||
table.index tbody th[rowspan]:not([rowspan='1']),
|
||
table.data tbody td[rowspan]:not([rowspan='1']),
|
||
table.index tbody td[rowspan]:not([rowspan='1']) {
|
||
border-left: 1px solid silver;
|
||
}
|
||
|
||
table.data tbody th[rowspan]:first-child,
|
||
table.index tbody th[rowspan]:first-child,
|
||
table.data tbody td[rowspan]:first-child,
|
||
table.index tbody td[rowspan]:first-child{
|
||
border-left: 0;
|
||
border-right: 1px solid silver;
|
||
}
|
||
*/
|
||
|
||
/******************************************************************************/
|
||
/* Indices */
|
||
/******************************************************************************/
|
||
|
||
|
||
/** Table of Contents *********************************************************/
|
||
|
||
.toc a {
|
||
/* More spacing; use padding to make it part of the click target. */
|
||
padding-top: 0.1rem;
|
||
/* Larger, more consistently-sized click target */
|
||
display: block;
|
||
/* Reverse color scheme */
|
||
color: black;
|
||
color: var(--toclink-text);
|
||
border-color: #3980b5;
|
||
border-color: var(--toclink-underline);
|
||
}
|
||
.toc a:visited {
|
||
color: black;
|
||
color: var(--toclink-visited-text);
|
||
border-color: #054572;
|
||
border-color: var(--toclink-visited-underline);
|
||
}
|
||
.toc a:not(:focus):not(:hover) {
|
||
/* Allow colors to cascade through from link styling */
|
||
border-bottom-color: transparent;
|
||
}
|
||
|
||
.toc, .toc ol, .toc ul, .toc li {
|
||
list-style: none; /* Numbers must be inlined into source */
|
||
/* because generated content isn't search/selectable and markers can't do multilevel yet */
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.1rem; /* consistent spacing */
|
||
}
|
||
|
||
/* ToC not indented until third level, but font style & margins show hierarchy */
|
||
.toc > li { font-weight: bold; }
|
||
.toc > li li { font-weight: normal; }
|
||
.toc > li li li { font-size: 95%; }
|
||
.toc > li li li li { font-size: 90%; }
|
||
.toc > li li li li .secno { font-size: 85%; }
|
||
.toc > li li li li li { font-size: 85%; }
|
||
.toc > li li li li li .secno { font-size: 100%; }
|
||
|
||
/* @supports not (display:grid) { */
|
||
.toc > li { margin: 1.5rem 0; }
|
||
.toc > li li { margin: 0.3rem 0; }
|
||
.toc > li li li { margin-left: 2rem; }
|
||
|
||
/* Section numbers in a column of their own */
|
||
.toc .secno {
|
||
float: left;
|
||
width: 4rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.toc li {
|
||
clear: both;
|
||
}
|
||
|
||
:not(li) > .toc { margin-left: 5rem; }
|
||
.toc .secno { margin-left: -5rem; }
|
||
.toc > li li li .secno { margin-left: -7rem; }
|
||
.toc > li li li li .secno { margin-left: -9rem; }
|
||
.toc > li li li li li .secno { margin-left: -11rem; }
|
||
|
||
/* Tighten up indentation in narrow ToCs */
|
||
@media (max-width: 30em) {
|
||
:not(li) > .toc { margin-left: 4rem; }
|
||
.toc .secno { margin-left: -4rem; }
|
||
.toc > li li li { margin-left: 1rem; }
|
||
.toc > li li li .secno { margin-left: -5rem; }
|
||
.toc > li li li li .secno { margin-left: -6rem; }
|
||
.toc > li li li li li .secno { margin-left: -7rem; }
|
||
}
|
||
/* Loosen it on wide screens */
|
||
@media screen and (min-width: 78em) {
|
||
body:not(.toc-inline) :not(li) > .toc { margin-left: 4rem; }
|
||
body:not(.toc-inline) .toc .secno { margin-left: -4rem; }
|
||
body:not(.toc-inline) .toc > li li li { margin-left: 1rem; }
|
||
body:not(.toc-inline) .toc > li li li .secno { margin-left: -5rem; }
|
||
body:not(.toc-inline) .toc > li li li li .secno { margin-left: -6rem; }
|
||
body:not(.toc-inline) .toc > li li li li li .secno { margin-left: -7rem; }
|
||
}
|
||
/* } */
|
||
|
||
@supports (display:grid) and (display:contents) {
|
||
/* Use #toc over .toc to override non-@supports rules. */
|
||
#toc {
|
||
display: grid;
|
||
align-content: start;
|
||
grid-template-columns: auto 1fr;
|
||
grid-column-gap: 1rem;
|
||
column-gap: 1rem;
|
||
grid-row-gap: .6rem;
|
||
row-gap: .6rem;
|
||
}
|
||
#toc h2 {
|
||
grid-column: 1 / -1;
|
||
margin-bottom: 0;
|
||
}
|
||
#toc ol,
|
||
#toc li,
|
||
#toc a {
|
||
display: contents;
|
||
/* Switch <a> to subgrid when supported */
|
||
}
|
||
#toc span {
|
||
margin: 0;
|
||
}
|
||
#toc > .toc > li > a > span {
|
||
/* The spans of the top-level list,
|
||
comprising the first items of each top-level section. */
|
||
margin-top: 1.1rem;
|
||
}
|
||
#toc#toc .secno { /* Ugh, need more specificity to override base.css */
|
||
grid-column: 1;
|
||
width: auto;
|
||
margin-left: 0;
|
||
}
|
||
#toc .content {
|
||
grid-column: 2;
|
||
width: auto;
|
||
margin-right: 1rem;
|
||
}
|
||
#toc .content:hover,
|
||
#toc .content:focus {
|
||
background: rgba(75%, 75%, 75%, .25);
|
||
background: var(--a-hover-bg);
|
||
border-bottom: 3px solid #054572;
|
||
border-bottom: 3px solid var(--toclink-underline);
|
||
margin-bottom: -3px;
|
||
}
|
||
#toc li li li .content {
|
||
margin-left: 1rem;
|
||
}
|
||
#toc li li li li .content {
|
||
margin-left: 2rem;
|
||
}
|
||
}
|
||
|
||
|
||
/** Index *********************************************************************/
|
||
|
||
/* Index Lists: Layout */
|
||
ul.index { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
|
||
ul.index li { margin-left: 0; list-style: none; break-inside: avoid; }
|
||
ul.index li li { margin-left: 1em }
|
||
ul.index dl { margin-top: 0; }
|
||
ul.index dt { margin: .2em 0 .2em 20px;}
|
||
ul.index dd { margin: .2em 0 .2em 40px;}
|
||
/* Index Lists: Typography */
|
||
ul.index ul,
|
||
ul.index dl { font-size: smaller; }
|
||
@media not print {
|
||
ul.index li span {
|
||
white-space: nowrap;
|
||
color: transparent; }
|
||
ul.index li a:hover + span,
|
||
ul.index li a:focus + span {
|
||
color: #707070;
|
||
color: var(--indexinfo-text);
|
||
}
|
||
}
|
||
|
||
/** Index Tables *****************************************************/
|
||
/* See also the data table styling section, which this effectively subclasses */
|
||
|
||
table.index {
|
||
font-size: small;
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
text-align: left;
|
||
margin: 1em 0;
|
||
}
|
||
|
||
table.index td,
|
||
table.index th {
|
||
padding: 0.4em;
|
||
}
|
||
|
||
table.index tr:hover td:not([rowspan]),
|
||
table.index tr:hover th:not([rowspan]) {
|
||
color: black;
|
||
color: var(--indextable-hover-text);
|
||
background: #f7f8f9;
|
||
background: var(--indextable-hover-bg);
|
||
}
|
||
|
||
/* The link in the first column in the property table (formerly a TD) */
|
||
table.index th:first-child a {
|
||
font-weight: bold;
|
||
}
|
||
|
||
/******************************************************************************/
|
||
/* Print */
|
||
/******************************************************************************/
|
||
|
||
@media print {
|
||
/* Pages have their own margins. */
|
||
html {
|
||
margin: 0;
|
||
}
|
||
/* Serif for print. */
|
||
body {
|
||
font-family: serif;
|
||
}
|
||
}
|
||
@page {
|
||
margin: 1.5cm 1.1cm;
|
||
}
|
||
|
||
|
||
|
||
/******************************************************************************/
|
||
/* Overflow Control */
|
||
/******************************************************************************/
|
||
|
||
.figure .caption, .sidefigure .caption, figcaption {
|
||
/* in case figure is overlarge, limit caption to 50em */
|
||
max-width: 50rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.overlarge {
|
||
/* Magic to create good table positioning:
|
||
"content column" is 50ems wide at max; less on smaller screens.
|
||
Extra space (after ToC + content) is empty on the right.
|
||
|
||
1. When table < content column, centers table in column.
|
||
2. When content < table < available, left-aligns.
|
||
3. When table > available, fills available + scroll bar.
|
||
*/
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 50em);
|
||
}
|
||
.overlarge > table {
|
||
/* limit preferred width of table */
|
||
max-width: 50em;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
@media (min-width: 55em) {
|
||
.overlarge {
|
||
margin-right: calc(13px + 26.5rem - 50vw);
|
||
max-width: none;
|
||
}
|
||
}
|
||
@media screen and (min-width: 78em) {
|
||
body:not(.toc-inline) .overlarge {
|
||
/* 30.5em body padding 50em content area */
|
||
margin-right: calc(40em - 50vw) !important;
|
||
}
|
||
}
|
||
@media screen and (min-width: 90em) {
|
||
body:not(.toc-inline) .overlarge {
|
||
/* 4em html margin 30.5em body padding 50em content area */
|
||
margin-right: calc(84.5em - 100vw) !important;
|
||
}
|
||
}
|
||
|
||
@media not print {
|
||
.overlarge {
|
||
overflow-x: auto;
|
||
/* See Lea Verou's explanation background-attachment:
|
||
* http://lea.verou.me/2012/04/background-attachment-local/
|
||
*
|
||
background: top left / 4em 100% linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)) local,
|
||
top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
|
||
top left / 1em 100% linear-gradient(to right, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
|
||
top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
|
||
white;
|
||
background-repeat: no-repeat;
|
||
*/
|
||
}
|
||
}
|
||
</style>
|
||
<meta content="Bikeshed version 5f7b0e20, updated Tue Aug 18 15:46:28 2020 -0700" name="generator">
|
||
<link href="https://drafts.csswg.org/css-grid-3/" rel="canonical">
|
||
<style>/* style-autolinks */
|
||
|
||
.css.css, .property.property, .descriptor.descriptor {
|
||
color: var(--a-normal-text);
|
||
font-size: inherit;
|
||
font-family: inherit;
|
||
}
|
||
.css::before, .property::before, .descriptor::before {
|
||
content: "‘";
|
||
}
|
||
.css::after, .property::after, .descriptor::after {
|
||
content: "’";
|
||
}
|
||
.property, .descriptor {
|
||
/* Don't wrap property and descriptor names */
|
||
white-space: nowrap;
|
||
}
|
||
.type { /* CSS value <type> */
|
||
font-style: italic;
|
||
}
|
||
pre .property::before, pre .property::after {
|
||
content: "";
|
||
}
|
||
[data-link-type="property"]::before,
|
||
[data-link-type="propdesc"]::before,
|
||
[data-link-type="descriptor"]::before,
|
||
[data-link-type="value"]::before,
|
||
[data-link-type="function"]::before,
|
||
[data-link-type="at-rule"]::before,
|
||
[data-link-type="selector"]::before,
|
||
[data-link-type="maybe"]::before {
|
||
content: "‘";
|
||
}
|
||
[data-link-type="property"]::after,
|
||
[data-link-type="propdesc"]::after,
|
||
[data-link-type="descriptor"]::after,
|
||
[data-link-type="value"]::after,
|
||
[data-link-type="function"]::after,
|
||
[data-link-type="at-rule"]::after,
|
||
[data-link-type="selector"]::after,
|
||
[data-link-type="maybe"]::after {
|
||
content: "’";
|
||
}
|
||
|
||
[data-link-type].production::before,
|
||
[data-link-type].production::after,
|
||
.prod [data-link-type]::before,
|
||
.prod [data-link-type]::after {
|
||
content: "";
|
||
}
|
||
|
||
[data-link-type=element],
|
||
[data-link-type=element-attr] {
|
||
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||
font-size: .9em;
|
||
}
|
||
[data-link-type=element]::before { content: "<" }
|
||
[data-link-type=element]::after { content: ">" }
|
||
|
||
[data-link-type=biblio] {
|
||
white-space: pre;
|
||
}</style>
|
||
<style>/* style-colors */
|
||
|
||
/* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */
|
||
html {
|
||
color: black;
|
||
color: var(--text);
|
||
background-color: white;
|
||
background-color: var(--bg);
|
||
}
|
||
:root {
|
||
color-scheme: light dark;
|
||
|
||
--text: black;
|
||
--bg: white;
|
||
|
||
--logo-bg: #1a5e9a;
|
||
--logo-active-bg: #c00;
|
||
--logo-text: white;
|
||
|
||
--tocnav-normal-text: #707070;
|
||
--tocnav-normal-bg: var(--bg);
|
||
--tocnav-hover-text: var(--tocnav-normal-text);
|
||
--tocnav-hover-bg: #f8f8f8;
|
||
--tocnav-active-text: #c00;
|
||
--tocnav-active-bg: var(--tocnav-normal-bg);
|
||
|
||
--tocsidebar-text: var(--text);
|
||
--tocsidebar-bg: #f7f8f9;
|
||
--tocsidebar-shadow: rgba(0,0,0,.1);
|
||
--tocsidebar-heading-text: hsla(203,20%,40%,.7);
|
||
|
||
--toclink-text: var(--text);
|
||
--toclink-underline: #3980b5;
|
||
--toclink-visited-text: var(--toclink-text);
|
||
--toclink-visited-underline: #054572;
|
||
|
||
--heading-text: #005a9c;
|
||
|
||
--hr-text: var(--text);
|
||
|
||
--algo-border: #def;
|
||
|
||
--del-text: red;
|
||
--del-bg: transparent;
|
||
--ins-text: #080;
|
||
--ins-bg: transparent;
|
||
|
||
--a-normal-text: #034575;
|
||
--a-normal-underline: #707070;
|
||
--a-visited-text: var(--a-normal-text);
|
||
--a-visited-underline: #bbb;
|
||
--a-hover-bg: rgba(75%, 75%, 75%, .25);
|
||
--a-active-text: #c00;
|
||
--a-active-underline: #c00;
|
||
|
||
--blockquote-border: silver;
|
||
--blockquote-bg: transparent;
|
||
--blockquote-text: currentcolor;
|
||
|
||
--issue-border: #e05252;
|
||
--issue-bg: #fbe9e9;
|
||
--issue-text: var(--text);
|
||
--issueheading-text: #831616;
|
||
|
||
--example-border: #e0cb52;
|
||
--example-bg: #fcfaee;
|
||
--example-text: var(--text);
|
||
--exampleheading-text: #574b0f;
|
||
|
||
--note-border: #52e052;
|
||
--note-bg: #e9fbe9;
|
||
--note-text: var(--text);
|
||
--noteheading-text: hsl(120, 70%, 30%);
|
||
--notesummary-underline: silver;
|
||
|
||
--assertion-border: #aaa;
|
||
--assertion-bg: #eee;
|
||
--assertion-text: black;
|
||
|
||
--advisement-border: orange;
|
||
--advisement-bg: #fec;
|
||
--advisement-text: var(--text);
|
||
--advisementheading-text: #b35f00;
|
||
|
||
--warning-border: red;
|
||
--warning-bg: hsla(40,100%,50%,0.95);
|
||
--warning-text: var(--text);
|
||
|
||
--def-border: #8ccbf2;
|
||
--def-bg: #def;
|
||
--def-text: var(--text);
|
||
--defrow-border: #bbd7e9;
|
||
|
||
--datacell-border: silver;
|
||
|
||
--indexinfo-text: #707070;
|
||
|
||
--indextable-hover-text: black;
|
||
--indextable-hover-bg: #f7f8f9;
|
||
|
||
--outdatedspec-bg: rgba(0, 0, 0, .5);
|
||
--outdatedspec-text: black;
|
||
--outdated-bg: maroon;
|
||
--outdated-text: white;
|
||
--outdated-shadow: red;
|
||
|
||
--editedrec-bg: darkorange;
|
||
}</style>
|
||
<style>/* style-counters */
|
||
|
||
body {
|
||
counter-reset: example figure issue;
|
||
}
|
||
.issue {
|
||
counter-increment: issue;
|
||
}
|
||
.issue:not(.no-marker)::before {
|
||
content: "Issue " counter(issue);
|
||
}
|
||
|
||
.example {
|
||
counter-increment: example;
|
||
}
|
||
.example:not(.no-marker)::before {
|
||
content: "Example " counter(example);
|
||
}
|
||
.invalid.example:not(.no-marker)::before,
|
||
.illegal.example:not(.no-marker)::before {
|
||
content: "Invalid Example" counter(example);
|
||
}
|
||
|
||
figcaption {
|
||
counter-increment: figure;
|
||
}
|
||
figcaption:not(.no-marker)::before {
|
||
content: "Figure " counter(figure) " ";
|
||
}</style>
|
||
<style>/* style-dfn-panel */
|
||
|
||
:root {
|
||
--dfnpanel-bg: #ddd;
|
||
--dfnpanel-text: var(--text);
|
||
}
|
||
.dfn-panel {
|
||
position: absolute;
|
||
z-index: 35;
|
||
height: auto;
|
||
width: -webkit-fit-content;
|
||
width: fit-content;
|
||
max-width: 300px;
|
||
max-height: 500px;
|
||
overflow: auto;
|
||
padding: 0.5em 0.75em;
|
||
font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
|
||
background: var(--dfnpanel-bg);
|
||
color: var(--dfnpanel-text);
|
||
border: outset 0.2em;
|
||
}
|
||
.dfn-panel:not(.on) { display: none; }
|
||
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
|
||
.dfn-panel > b { display: block; }
|
||
.dfn-panel a { color: black; }
|
||
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
|
||
.dfn-panel > b + b { margin-top: 0.25em; }
|
||
.dfn-panel ul { padding: 0; }
|
||
.dfn-panel li { list-style: inside; }
|
||
.dfn-panel.activated {
|
||
display: inline-block;
|
||
position: fixed;
|
||
left: .5em;
|
||
bottom: 2em;
|
||
margin: 0 auto;
|
||
max-width: calc(100vw - 1.5em - .4em - .5em);
|
||
max-height: 30vh;
|
||
}
|
||
|
||
.dfn-paneled { cursor: pointer; }
|
||
</style>
|
||
<style>/* style-md-lists */
|
||
|
||
/* This is a weird hack for me not yet following the commonmark spec
|
||
regarding paragraph and lists. */
|
||
[data-md] > :first-child {
|
||
margin-top: 0;
|
||
}
|
||
[data-md] > :last-child {
|
||
margin-bottom: 0;
|
||
}</style>
|
||
<style>/* style-selflinks */
|
||
|
||
:root {
|
||
--selflink-text: white;
|
||
--selflink-bg: gray;
|
||
--selflink-hover-text: black;
|
||
}
|
||
.heading, .issue, .note, .example, li, dt {
|
||
position: relative;
|
||
}
|
||
a.self-link {
|
||
position: absolute;
|
||
top: 0;
|
||
left: calc(-1 * (3.5rem - 26px));
|
||
width: calc(3.5rem - 26px);
|
||
height: 2em;
|
||
text-align: center;
|
||
border: none;
|
||
transition: opacity .2s;
|
||
opacity: .5;
|
||
}
|
||
a.self-link:hover {
|
||
opacity: 1;
|
||
}
|
||
.heading > a.self-link {
|
||
font-size: 83%;
|
||
}
|
||
li > a.self-link {
|
||
left: calc(-1 * (3.5rem - 26px) - 2em);
|
||
}
|
||
dfn > a.self-link {
|
||
top: auto;
|
||
left: auto;
|
||
opacity: 0;
|
||
width: 1.5em;
|
||
height: 1.5em;
|
||
background: var(--selflink-bg);
|
||
color: var(--selflink-text);
|
||
font-style: normal;
|
||
transition: opacity .2s, background-color .2s, color .2s;
|
||
}
|
||
dfn:hover > a.self-link {
|
||
opacity: 1;
|
||
}
|
||
dfn > a.self-link:hover {
|
||
color: var(--selflink-hover-text);
|
||
}
|
||
|
||
a.self-link::before { content: "¶"; }
|
||
.heading > a.self-link::before { content: "§"; }
|
||
dfn > a.self-link::before { content: "#"; }
|
||
</style>
|
||
<style>/* style-syntax-highlighting */
|
||
|
||
code.highlight { padding: .1em; border-radius: .3em; }
|
||
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
|
||
|
||
.highlight:not(.idl) { background: #fdf6e3; }
|
||
c-[a] { color: #990055 } /* Keyword.Declaration */
|
||
c-[b] { color: #990055 } /* Keyword.Type */
|
||
c-[c] { color: #708090 } /* Comment */
|
||
c-[d] { color: #708090 } /* Comment.Multiline */
|
||
c-[e] { color: #0077aa } /* Name.Attribute */
|
||
c-[f] { color: #669900 } /* Name.Tag */
|
||
c-[g] { color: #222222 } /* Name.Variable */
|
||
c-[k] { color: #990055 } /* Keyword */
|
||
c-[l] { color: #000000 } /* Literal */
|
||
c-[m] { color: #000000 } /* Literal.Number */
|
||
c-[n] { color: #0077aa } /* Name */
|
||
c-[o] { color: #999999 } /* Operator */
|
||
c-[p] { color: #999999 } /* Punctuation */
|
||
c-[s] { color: #a67f59 } /* Literal.String */
|
||
c-[t] { color: #a67f59 } /* Literal.String.Single */
|
||
c-[u] { color: #a67f59 } /* Literal.String.Double */
|
||
c-[cp] { color: #708090 } /* Comment.Preproc */
|
||
c-[c1] { color: #708090 } /* Comment.Single */
|
||
c-[cs] { color: #708090 } /* Comment.Special */
|
||
c-[kc] { color: #990055 } /* Keyword.Constant */
|
||
c-[kn] { color: #990055 } /* Keyword.Namespace */
|
||
c-[kp] { color: #990055 } /* Keyword.Pseudo */
|
||
c-[kr] { color: #990055 } /* Keyword.Reserved */
|
||
c-[ld] { color: #000000 } /* Literal.Date */
|
||
c-[nc] { color: #0077aa } /* Name.Class */
|
||
c-[no] { color: #0077aa } /* Name.Constant */
|
||
c-[nd] { color: #0077aa } /* Name.Decorator */
|
||
c-[ni] { color: #0077aa } /* Name.Entity */
|
||
c-[ne] { color: #0077aa } /* Name.Exception */
|
||
c-[nf] { color: #0077aa } /* Name.Function */
|
||
c-[nl] { color: #0077aa } /* Name.Label */
|
||
c-[nn] { color: #0077aa } /* Name.Namespace */
|
||
c-[py] { color: #0077aa } /* Name.Property */
|
||
c-[ow] { color: #999999 } /* Operator.Word */
|
||
c-[mb] { color: #000000 } /* Literal.Number.Bin */
|
||
c-[mf] { color: #000000 } /* Literal.Number.Float */
|
||
c-[mh] { color: #000000 } /* Literal.Number.Hex */
|
||
c-[mi] { color: #000000 } /* Literal.Number.Integer */
|
||
c-[mo] { color: #000000 } /* Literal.Number.Oct */
|
||
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
|
||
c-[sc] { color: #a67f59 } /* Literal.String.Char */
|
||
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
|
||
c-[se] { color: #a67f59 } /* Literal.String.Escape */
|
||
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
|
||
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
|
||
c-[sx] { color: #a67f59 } /* Literal.String.Other */
|
||
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
|
||
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
|
||
c-[vc] { color: #0077aa } /* Name.Variable.Class */
|
||
c-[vg] { color: #0077aa } /* Name.Variable.Global */
|
||
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
|
||
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
|
||
</style>
|
||
<style>/* style-darkmode */
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--text: #ddd;
|
||
--bg: black;
|
||
|
||
--logo-bg: #1a5e9a;
|
||
--logo-active-bg: #c00;
|
||
--logo-text: white;
|
||
|
||
--tocnav-normal-text: #999;
|
||
--tocnav-normal-bg: var(--bg);
|
||
--tocnav-hover-text: var(--tocnav-normal-text);
|
||
--tocnav-hover-bg: #080808;
|
||
--tocnav-active-text: #f44;
|
||
--tocnav-active-bg: var(--tocnav-normal-bg);
|
||
|
||
--tocsidebar-text: var(--text);
|
||
--tocsidebar-bg: #080808;
|
||
--tocsidebar-shadow: rgba(255,255,255,.1);
|
||
--tocsidebar-heading-text: hsla(203,20%,40%,.7);
|
||
|
||
--toclink-text: var(--text);
|
||
--toclink-underline: #6af;
|
||
--toclink-visited-text: var(--toclink-text);
|
||
--toclink-visited-underline: #054572;
|
||
|
||
--heading-text: #8af;
|
||
|
||
--hr-text: var(--text);
|
||
|
||
--algo-border: #456;
|
||
|
||
--del-text: #f44;
|
||
--del-bg: transparent;
|
||
--ins-text: #4a4;
|
||
--ins-bg: transparent;
|
||
|
||
--a-normal-text: #6af;
|
||
--a-normal-underline: #555;
|
||
--a-visited-text: var(--a-normal-text);
|
||
--a-visited-underline: var(--a-normal-underline);
|
||
--a-hover-bg: rgba(25%, 25%, 25%, .2);
|
||
--a-active-text: #f44;
|
||
--a-active-underline: var(--a-active-text);
|
||
|
||
--borderedblock-bg: rgba(255, 255, 255, .05);
|
||
|
||
--blockquote-border: silver;
|
||
--blockquote-bg: var(--borderedblock-bg);
|
||
--blockquote-text: currentcolor;
|
||
|
||
--issue-border: #e05252;
|
||
--issue-bg: var(--borderedblock-bg);
|
||
--issue-text: var(--text);
|
||
--issueheading-text: hsl(0deg, 70%, 70%);
|
||
|
||
--example-border: hsl(50deg, 90%, 60%);
|
||
--example-bg: var(--borderedblock-bg);
|
||
--example-text: var(--text);
|
||
--exampleheading-text: hsl(50deg, 70%, 70%);
|
||
|
||
--note-border: hsl(120deg, 100%, 35%);
|
||
--note-bg: var(--borderedblock-bg);
|
||
--note-text: var(--text);
|
||
--noteheading-text: hsl(120, 70%, 70%);
|
||
--notesummary-underline: silver;
|
||
|
||
--assertion-border: #444;
|
||
--assertion-bg: var(--borderedblock-bg);
|
||
--assertion-text: var(--text);
|
||
|
||
--advisement-border: orange;
|
||
--advisement-bg: #222218;
|
||
--advisement-text: var(--text);
|
||
--advisementheading-text: #f84;
|
||
|
||
--warning-border: red;
|
||
--warning-bg: hsla(40,100%,20%,0.95);
|
||
--warning-text: var(--text);
|
||
|
||
--def-border: #8ccbf2;
|
||
--def-bg: #080818;
|
||
--def-text: var(--text);
|
||
--defrow-border: #136;
|
||
|
||
--datacell-border: silver;
|
||
|
||
--indexinfo-text: #aaa;
|
||
|
||
--indextable-hover-text: var(--text);
|
||
--indextable-hover-bg: #181818;
|
||
|
||
--outdatedspec-bg: rgba(255, 255, 255, .5);
|
||
--outdatedspec-text: black;
|
||
--outdated-bg: maroon;
|
||
--outdated-text: white;
|
||
--outdated-shadow: red;
|
||
|
||
--editedrec-bg: darkorange;
|
||
}
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--selflink-text: black;
|
||
--selflink-bg: silver;
|
||
--selflink-hover-text: white;
|
||
}
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--dfnpanel-bg: #222;
|
||
--dfnpanel-text: var(--text);
|
||
}
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
.highlight:not(.idl) { background: rgba(255, 255, 255, .05); }
|
||
|
||
c-[a] { color: #d33682 } /* Keyword.Declaration */
|
||
c-[b] { color: #d33682 } /* Keyword.Type */
|
||
c-[c] { color: #2aa198 } /* Comment */
|
||
c-[d] { color: #2aa198 } /* Comment.Multiline */
|
||
c-[e] { color: #268bd2 } /* Name.Attribute */
|
||
c-[f] { color: #b58900 } /* Name.Tag */
|
||
c-[g] { color: #cb4b16 } /* Name.Variable */
|
||
c-[k] { color: #d33682 } /* Keyword */
|
||
c-[l] { color: #657b83 } /* Literal */
|
||
c-[m] { color: #657b83 } /* Literal.Number */
|
||
c-[n] { color: #268bd2 } /* Name */
|
||
c-[o] { color: #657b83 } /* Operator */
|
||
c-[p] { color: #657b83 } /* Punctuation */
|
||
c-[s] { color: #6c71c4 } /* Literal.String */
|
||
c-[t] { color: #6c71c4 } /* Literal.String.Single */
|
||
c-[u] { color: #6c71c4 } /* Literal.String.Double */
|
||
c-[ch] { color: #2aa198 } /* Comment.Hashbang */
|
||
c-[cp] { color: #2aa198 } /* Comment.Preproc */
|
||
c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */
|
||
c-[c1] { color: #2aa198 } /* Comment.Single */
|
||
c-[cs] { color: #2aa198 } /* Comment.Special */
|
||
c-[kc] { color: #d33682 } /* Keyword.Constant */
|
||
c-[kn] { color: #d33682 } /* Keyword.Namespace */
|
||
c-[kp] { color: #d33682 } /* Keyword.Pseudo */
|
||
c-[kr] { color: #d33682 } /* Keyword.Reserved */
|
||
c-[ld] { color: #657b83 } /* Literal.Date */
|
||
c-[nc] { color: #268bd2 } /* Name.Class */
|
||
c-[no] { color: #268bd2 } /* Name.Constant */
|
||
c-[nd] { color: #268bd2 } /* Name.Decorator */
|
||
c-[ni] { color: #268bd2 } /* Name.Entity */
|
||
c-[ne] { color: #268bd2 } /* Name.Exception */
|
||
c-[nf] { color: #268bd2 } /* Name.Function */
|
||
c-[nl] { color: #268bd2 } /* Name.Label */
|
||
c-[nn] { color: #268bd2 } /* Name.Namespace */
|
||
c-[py] { color: #268bd2 } /* Name.Property */
|
||
c-[ow] { color: #657b83 } /* Operator.Word */
|
||
c-[mb] { color: #657b83 } /* Literal.Number.Bin */
|
||
c-[mf] { color: #657b83 } /* Literal.Number.Float */
|
||
c-[mh] { color: #657b83 } /* Literal.Number.Hex */
|
||
c-[mi] { color: #657b83 } /* Literal.Number.Integer */
|
||
c-[mo] { color: #657b83 } /* Literal.Number.Oct */
|
||
c-[sa] { color: #6c71c4 } /* Literal.String.Affix */
|
||
c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */
|
||
c-[sc] { color: #6c71c4 } /* Literal.String.Char */
|
||
c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */
|
||
c-[sd] { color: #6c71c4 } /* Literal.String.Doc */
|
||
c-[se] { color: #6c71c4 } /* Literal.String.Escape */
|
||
c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */
|
||
c-[si] { color: #6c71c4 } /* Literal.String.Interpol */
|
||
c-[sx] { color: #6c71c4 } /* Literal.String.Other */
|
||
c-[sr] { color: #6c71c4 } /* Literal.String.Regex */
|
||
c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */
|
||
c-[fm] { color: #268bd2 } /* Name.Function.Magic */
|
||
c-[vc] { color: #cb4b16 } /* Name.Variable.Class */
|
||
c-[vg] { color: #cb4b16 } /* Name.Variable.Global */
|
||
c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */
|
||
c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */
|
||
c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */
|
||
}
|
||
</style>
|
||
<body class="h-entry">
|
||
<div class="head">
|
||
<p data-fill-with="logo"></p>
|
||
<h1 class="p-name no-ref" id="title">CSS Masonry Layout Module</h1>
|
||
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="2020-09-23">23 September 2020</time></span></h2>
|
||
<div data-fill-with="spec-metadata">
|
||
<dl>
|
||
<dt>This version:
|
||
<dd><a class="u-url" href="https://drafts.csswg.org/css-grid-3/">https://drafts.csswg.org/css-grid-3/</a>
|
||
<dt>Issue Tracking:
|
||
<dd><a href="#issues-index">Inline In Spec</a>
|
||
<dt class="editor">Editor:
|
||
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:mailto:mats@mozilla.com">Mats Palmgren</a> (<span class="p-org org">Mozilla</span>)
|
||
</dl>
|
||
</div>
|
||
<div data-fill-with="warning"></div>
|
||
<p class="copyright" data-fill-with="copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="https://licensebuttons.net/p/zero/1.0/80x15.png"></a> To the extent possible under law, the editors have waived all copyright
|
||
and related or neighboring rights to this work.
|
||
In addition, as of 23 September 2020,
|
||
the editors have made this specification available under the <a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
|
||
which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
|
||
Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document. </p>
|
||
<hr title="Separator for header">
|
||
</div>
|
||
<div class="p-summary" data-fill-with="abstract">
|
||
<h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
|
||
<p>This module introduces masonry layout as an additional layout mode for <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> containers.</p>
|
||
</div>
|
||
<div data-fill-with="at-risk"></div>
|
||
<nav data-fill-with="table-of-contents" id="toc">
|
||
<h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
|
||
<ol class="toc" role="directory">
|
||
<li>
|
||
<a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
|
||
<ol class="toc">
|
||
<li><a href="#background"><span class="secno">1.1</span> <span class="content"> Background and Motivation</span></a>
|
||
<li><a href="#values"><span class="secno">1.2</span> <span class="content"> Value Definitions</span></a>
|
||
</ol>
|
||
<li>
|
||
<a href="#masonry-layout"><span class="secno">2</span> <span class="content"> Masonry Layout</span></a>
|
||
<ol class="toc">
|
||
<li><a href="#line-name-resolution"><span class="secno">2.1</span> <span class="content"> Line Name Resolution</span></a>
|
||
<li><a href="#grid-item-placement"><span class="secno">2.2</span> <span class="content"> Grid Item Placement</span></a>
|
||
<li><a href="#masonry-layout-algorithm"><span class="secno">2.3</span> <span class="content"> Masonry Layout Algorithm</span></a>
|
||
</ol>
|
||
<li><a href="#containing-block"><span class="secno">3</span> <span class="content"> Containing Block</span></a>
|
||
<li>
|
||
<a href="#track-sizing"><span class="secno">4</span> <span class="content"> Track sizing</span></a>
|
||
<ol class="toc">
|
||
<li><a href="#repeat-auto-fit"><span class="secno">4.1</span> <span class="content"> repeat(auto-fit)</span></a>
|
||
</ol>
|
||
<li><a href="##implicit-grid"><span class="secno">5</span> <span class="content"> The Implicit Grid </span></a>
|
||
<li><a href="#intrinsic-sizes"><span class="secno">6</span> <span class="content"> Sizing Grid Containers</span></a>
|
||
<li>
|
||
<a href="#alignment"><span class="secno">7</span> <span class="content"> Alignment and Spacing</span></a>
|
||
<ol class="toc">
|
||
<li><a href="#tracks-alignment"><span class="secno">7.1</span> <span class="content"> The align-tracks and justify-tracks Properties </span></a>
|
||
<li><a href="#masonry-axis-stretch-alignment"><span class="secno">7.2</span> <span class="content"> Stretch Alignment in the Masonry Axis</span></a>
|
||
<li><a href="#masonry-axis-alignment"><span class="secno">7.3</span> <span class="content"> Individual Track Alignment in the Masonry Axis</span></a>
|
||
<li><a href="#masonry-axis-baseline-alignment"><span class="secno">7.4</span> <span class="content"> Baseline Alignment in the Masonry Axis</span></a>
|
||
</ol>
|
||
<li>
|
||
<a href="#pagination"><span class="secno">8</span> <span class="content"> Fragmentation</span></a>
|
||
<ol class="toc">
|
||
<li><a href="#masonry-axis-pagination"><span class="secno">8.1</span> <span class="content"> Fragmentation in the Masonry Axis</span></a>
|
||
<li><a href="#grid-axis-pagination"><span class="secno">8.2</span> <span class="content"> Fragmentation in the Grid Axis</span></a>
|
||
</ol>
|
||
<li><a href="#subgrids"><span class="secno">9</span> <span class="content"> Subgrids</span></a>
|
||
<li><a href="#abspos"><span class="secno">10</span> <span class="content"> Absolute Positioning</span></a>
|
||
<li><a href="#performance-notes"><span class="secno">11</span> <span class="content"> Performance Notes</span></a>
|
||
<li><a href="#graceful-degradation"><span class="secno">12</span> <span class="content"> Graceful Degradation</span></a>
|
||
<li><a href="#acknowledgements"><span class="secno">13</span> <span class="content"> Acknowledgements</span></a>
|
||
<li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
|
||
<li>
|
||
<a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
|
||
<ol class="toc">
|
||
<li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
|
||
<li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
|
||
</ol>
|
||
<li>
|
||
<a href="#references"><span class="secno"></span> <span class="content">References</span></a>
|
||
<ol class="toc">
|
||
<li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
|
||
<li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
|
||
</ol>
|
||
<li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
|
||
<li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
|
||
</ol>
|
||
</nav>
|
||
<main>
|
||
<h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
|
||
<p><em>This section is not normative.</em></p>
|
||
<p>Grid Layout is a layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.</p>
|
||
<figure>
|
||
<img alt="An example of grid layout:
|
||
two rows of items,
|
||
the first being four items — the last of which spans both rows,
|
||
and the second being two items — the first of which spans the first two columns — plus the spanned item from the first row." src="images/grid-layout.png">
|
||
<figcaption>Representative Grid layout example</figcaption>
|
||
</figure>
|
||
<p>Although many layouts can be expressed with regular Grid Layout, restricting items into a grid in both axes also makes it impossible to express some common layouts on the Web.</p>
|
||
<p>This module defines a layout system that removes that restriction so that items can be placed into Grid-like tracks in just one of the axes, while stacking them one after another in the other axis. Items are placed into the column (or row) with the most remaining space based on the layout size of the items placed so far. It extends <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> with this new grid item placement strategy and <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> with new alignment features.</p>
|
||
<h3 class="heading settled" data-level="1.1" id="background"><span class="secno">1.1. </span><span class="content"> Background and Motivation</span><a class="self-link" href="#background"></a></h3>
|
||
<p>Masonry layout is a common Web design pattern where a number of items — commonly images or short article summaries — are placed one by one into columns, so-called because it resembles stone masonry. Unlike <a href="https://drafts.csswg.org/css-multicol-1/">regular multi-column layout</a>, where items are placed vertically in the first column until they must spill over to the second column, masonry layout selects a column for each new item such that it is generally closer to the top of the layout than items placed later.</p>
|
||
<p>The Pinterest search results page exemplifies this layout:</p>
|
||
<figure>
|
||
<img alt="An example of masonry layout:
|
||
four columns of items,
|
||
each item is placed into the column with the smallest height so far." src="images/pinterest.png">
|
||
<figcaption>Representative masonry layout example</figcaption>
|
||
</figure>
|
||
<p>Here, each item has a different height (depending on the content and the width of the column), and inspecting the DOM reveals (as the visual content itself gives no indication of ordering) that each item has been placed into the column with the smallest height so far.</p>
|
||
<p>An advantage to using this layout over regular multi-column layout is that the masonry layout container height grows as more items are placed into it, as a balancing multi-column layout would, but the effect for the reader is that scrolling down will naturally lead to "later" items in the layout (that is, those less relevant in the search results).</p>
|
||
<p>Achieving this layout without knowing upfront how tall each item will be is currently not possible without using script.</p>
|
||
<h3 class="heading settled" data-level="1.2" id="values"><span class="secno">1.2. </span><span class="content"> Value Definitions</span><a class="self-link" href="#values"></a></h3>
|
||
<p>This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
|
||
Value types not defined in this specification are defined in CSS Values & Units <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
|
||
Combination with other CSS modules may expand the definitions of these value types.</p>
|
||
<p>In addition to the property-specific values listed in their definitions,
|
||
all properties defined in this specification
|
||
also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> keywords as their property value.
|
||
For readability they have not been repeated explicitly.</p>
|
||
<h2 class="heading settled" data-level="2" id="masonry-layout"><span class="secno">2. </span><span class="content"> Masonry Layout</span><a class="self-link" href="#masonry-layout"></a></h2>
|
||
<p>Masonry layout is supported for <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container">grid containers</a> by specifying the value <span class="css">masonry</span> for one of its axes. This axis is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="masonry-axis">masonry axis</dfn>, and the other axis is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="grid-axis">grid axis</dfn>.</p>
|
||
<table class="def propdef partial" data-link-for-hint="grid-template-columns">
|
||
<tbody>
|
||
<tr>
|
||
<th>Name:
|
||
<td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns" id="ref-for-propdef-grid-template-columns">grid-template-columns</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-rows" id="ref-for-propdef-grid-template-rows">grid-template-rows</a>
|
||
<tr class="value">
|
||
<th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
|
||
<td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-2/#typedef-track-list" id="ref-for-typedef-track-list"><track-list></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-2/#typedef-auto-track-list" id="ref-for-typedef-auto-track-list"><auto-track-list></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> subgrid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-grid-2/#typedef-line-name-list" id="ref-for-typedef-line-name-list"><line-name-list></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> masonry
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
|
||
<td>none
|
||
<tr>
|
||
<th>Applies to:
|
||
<td><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①">grid containers</a>
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
|
||
<td>no
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
|
||
<td>refer to corresponding dimension of the content area
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
|
||
<td>the keyword <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none">none</a> or the keyword <span class="css">masonry</span> or a <a href="https://drafts.csswg.org/css-grid-2/#computed-track-list">computed track list</a>
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
|
||
<td>see <a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns" id="termref-for-">CSS Grid</a>
|
||
</table>
|
||
<p>This allows us to use the full power of <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis">grid axis</a>. Line names and track sizes can be specified and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item">grid items</a> can be placed into the tracks and span them using <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column" id="ref-for-propdef-grid-column">grid-column</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row" id="ref-for-propdef-grid-row">grid-row</a> as usual. The <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> properties works the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②">grid container</a> in this axis. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis">masonry axis</a> however, items are laid out one after another using the <a href="#masonry-layout-algorithm">§ 2.3 Masonry Layout Algorithm</a>.</p>
|
||
<div class="example" id="example-1f001e34">
|
||
<a class="self-link" href="#example-1f001e34"></a> Here’s a masonry layout <a href="examples/pinterest-with-span.html">example</a> demonstrating placed and spanning items:
|
||
<figure>
|
||
<img src="images/example-pinterest-with-span.png">
|
||
<figcaption>Rendering of the example above.</figcaption>
|
||
</figure>
|
||
</div>
|
||
<p>Subgrid <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item①">grid items</a> are supported but subgridding only occurs in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container③">grid container’s</a> <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①">grid axis</a>, see <a href="#subgrids">§ 9 Subgrids</a> for details.</p>
|
||
<p>If <span class="css">masonry</span> is specified in both axes then the inline-axis will behave as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none①">none</a> and it will thus be the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②">grid axis</a>.</p>
|
||
<p><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item②">Grid items</a> are formed and <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify">blockified</a> exactly the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container④">grid container</a>.</p>
|
||
<p>All CSS properties works the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid container</a> unless otherwise specified by this specification. For example, <a href="https://www.w3.org/TR/css-grid/#order-accessibility">order</a><a data-link-type="dfn"> can be used to specify a different layout order for the items.</a></p>
|
||
<a data-link-type="dfn"> <h3 class="heading settled" data-level="2.1" id="line-name-resolution"><span class="secno">2.1. </span><span class="content"> Line Name Resolution</span><a class="self-link" href="#line-name-resolution"></a></h3> </a>
|
||
<p><a data-link-type="dfn" href="#running-position" id="ref-for-running-position"></a><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item③">Grid item</a> line name resolution works the same as if <span class="css">masonry</span> were replaced with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none②">none</a>, i.e. line names are resolved <em>in both axes</em>. The <a href="https://drafts.csswg.org/css-grid-2/#line-placement">line name resolution</a> works exactly is in <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a>.</p>
|
||
<h3 class="heading settled" data-level="2.2" id="grid-item-placement"><span class="secno">2.2. </span><span class="content"> Grid Item Placement</span><a class="self-link" href="#grid-item-placement"></a></h3>
|
||
<p><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item④">Grid items</a> are placed using these steps:</p>
|
||
<ol>
|
||
<li>Place the items as if the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①">masonry axis</a> had <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none③">none</a> specified in that axis.
|
||
<li>Items that were placed at the first (hypothetical) implicit track in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②">masonry axis</a> after step 1 keep their placement in both axes as their final placement. They will be laid out first in each <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③">grid axis</a> track and their <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis④">grid axis</a> placement is considered definite henceforth. All other items ignore their placement from step 1. Any item with with a specified definite placement in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③">masonry axis</a> that doesn’t result in it being placed at the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis④">masonry axis</a> will be treated as having <a class="property" data-link-type="propdesc">auto</a>-placement in that axis.
|
||
<li>Place items using the <a href="#masonry-layout-algorithm">Masonry layout algorithm</a> below.
|
||
</ol>
|
||
<p>(The reason for step 1 above is to determine which items contribute to intrinsic track sizing in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑤">grid axis</a>, see <a href="#track-sizing">Track sizing</a> below.)</p>
|
||
<h3 class="heading settled" data-level="2.3" id="masonry-layout-algorithm"><span class="secno">2.3. </span><span class="content"> Masonry Layout Algorithm</span><a class="self-link" href="#masonry-layout-algorithm"></a></h3>
|
||
<p>Items are placed in <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a> but items with a definite placement are placed before items with an indefinite position (as in regular grid layout). For each of the tracks in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑥">grid axis</a>, keep a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="running-position">running position</dfn> initialized to zero. For each item that was placed at line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑤">masonry axis</a> in <a href="#grid-item-placement">Grid Item Placement</a> step 1 above:</p>
|
||
<ol>
|
||
<li>position the item at the content edge of the grid container in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑥">masonry axis</a> and at its start track in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑦">grid axis</a>
|
||
<li>calculate the size of the <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑦">masonry axis</a>. Set the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position①">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑧">grid axis</a> tracks the item spans to the maximum of <code>margin-box-end + grid-gap</code> and the current <a data-link-type="dfn" href="#running-position" id="ref-for-running-position②">running position</a> of those tracks.
|
||
</ol>
|
||
<p class="note" role="note"><span>Note:</span> This means that items with a definite placement at line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑧">masonry axis</a> by <a href="#grid-item-placement">Grid Item Placement</a> step 1 can be made to intentionally overlap.</p>
|
||
<p>The remaining items get their final placement using the following steps:</p>
|
||
<ol>
|
||
<li>
|
||
If the item has an indefinite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑨">grid axis</a> then resolve its definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⓪">grid axis</a> using these substeps:
|
||
<ol>
|
||
<li>starting at the first <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①①">grid axis</a> line in the implicit grid...
|
||
<li>find the largest <a data-link-type="dfn" href="#running-position" id="ref-for-running-position③">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①②">grid axis</a> tracks that the item would span if it were placed at this line, call this position <code>max_pos</code>
|
||
<li>increment the line number and repeat step 2 until the item would no longer fit inside the grid
|
||
<li>pick the line that resulted in the smallest <code>max_pos</code> as the item’s definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①③">grid axis</a>
|
||
</ol>
|
||
Otherwise, a definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①④">grid axis</a> is honored the same as in a regular grid.
|
||
<li>position the item at its <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑤">grid axis</a> start track and the maximum of the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position④">running position</a>s of the tracks it spans
|
||
<li>calculate the size of the item’s <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑨">masonry axis</a>. Set the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position⑤">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑥">grid axis</a> tracks the item spans to <code>max_pos + margin-box-end + grid-gap</code>.
|
||
</ol>
|
||
<p>The Masonry Layout Algorithm above can be modified in two ways, using the new <a class="property" data-link-type="propdesc" href="#propdef-masonry-auto-flow" id="ref-for-propdef-masonry-auto-flow">masonry-auto-flow</a> property:</p>
|
||
<table class="def propdef" data-link-for-hint="masonry-auto-flow">
|
||
<tbody>
|
||
<tr>
|
||
<th>Name:
|
||
<td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-masonry-auto-flow">masonry-auto-flow</dfn>
|
||
<tr class="value">
|
||
<th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
|
||
<td class="prod">[ pack <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> next ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> [definite-first <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> ordered ]
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
|
||
<td>pack
|
||
<tr>
|
||
<th>Applies to:
|
||
<td><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑥">grid containers</a> with masonry layout
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
|
||
<td>no
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
|
||
<td>n/a
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
|
||
<td>specified keyword(s)
|
||
<tr>
|
||
<th>Canonical order:
|
||
<td>per grammar
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
|
||
<td>discrete
|
||
</table>
|
||
<p>First, picking definite items first for placement can be inhibited by specifying the <span class="css">ordered</span> keyword so that a plain <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a> is used instead. Second, instead of placing the items in the track(s) with the most remaining space as described above we can place them one after another in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑦">grid axis</a> by specifying the <span class="css">next</span> keyword, for <a href="examples/masonry-auto-flow-next.html">example</a>:</p>
|
||
<div class="example" id="example-be4288db">
|
||
<a class="self-link" href="#example-be4288db"></a>
|
||
<pre class="language-css highlight"><style>
|
||
.grid <c- p>{</c->
|
||
<c- k>display</c-><c- p>:</c-> inline-grid<c- p>;</c->
|
||
<c- k>grid</c-><c- p>:</c-> masonry / <c- nf>repeat</c-><c- p>(</c-><c- m>3</c-><c- p>,</c-> <c- m>2</c-><c- k>ch</c-><c- p>);</c->
|
||
<c- k>border</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid<c- p>;</c->
|
||
<c- k>masonry-auto-flow</c-><c- p>:</c-> next<c- p>;</c->
|
||
<c- p>}</c->
|
||
|
||
item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver <c- p>}</c->
|
||
item<c- nf>:nth-child</c-><c- p>(</c-><c- m>2</c-><c- k>n</c-><c- m>+1</c-><c- p>)</c-> <c- p>{</c->
|
||
<c- k>background</c-><c- p>:</c-> pink<c- p>;</c->
|
||
<c- k>height</c-><c- p>:</c-> <c- m>4</c-><c- k>em</c-><c- p>;</c->
|
||
<c- p>}</c->
|
||
</style>
|
||
</pre>
|
||
<pre class="language-html highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"grid"</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->1<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->2<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->3<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->4<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p></</c-><c- f>div</c-><c- p>></c->
|
||
</pre>
|
||
<figure>
|
||
<img src="images/grid-auto-flow-example-1.png">
|
||
<figcaption>Rendering of the <a class="css" data-link-type="propdesc" href="#propdef-masonry-auto-flow" id="ref-for-propdef-masonry-auto-flow①">masonry-auto-flow: next</a> example above.</figcaption>
|
||
</figure>
|
||
<p>(Without <a class="css" data-link-type="propdesc" href="#propdef-masonry-auto-flow" id="ref-for-propdef-masonry-auto-flow②">masonry-auto-flow: next</a>, item 4 would be placed below item 2.)</p>
|
||
</div>
|
||
<h2 class="heading settled" data-level="3" id="containing-block"><span class="secno">3. </span><span class="content"> Containing Block</span><a class="self-link" href="#containing-block"></a></h2>
|
||
<p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑤">grid item</a> is formed by its <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-area" id="ref-for-grid-area">grid area</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑧">grid axis</a> and the grid container’s content-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⓪">masonry axis</a>.</p>
|
||
<h2 class="heading settled" data-level="4" id="track-sizing"><span class="secno">4. </span><span class="content"> Track sizing</span><a class="self-link" href="#track-sizing"></a></h2>
|
||
<p>The <a href="https://drafts.csswg.org/css-grid-2/#algo-track-sizing">Track Sizing Algorithm</a> works as usual in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑨">grid axis</a>, except only the subset of items with a definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⓪">grid axis</a>, or which span all tracks, contribute to the intrinsic sizing. This makes the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①①">masonry axis</a> special since those items will contribute to the intrinsic sizing even if they were <a class="property" data-link-type="propdesc">auto</a>-placed in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②①">grid axis</a>. Other <a class="property" data-link-type="propdesc">auto</a>-placed items don’t contribute since which track they end up in depends on layout results; unless they span all tracks in which case there is only one possible placement and thus its placement is independent of layout results.</p>
|
||
<h3 class="heading settled" data-level="4.1" id="repeat-auto-fit"><span class="secno">4.1. </span><span class="content"> repeat(auto-fit)</span><a class="self-link" href="#repeat-auto-fit"></a></h3>
|
||
<p><span class="css">repeat(auto-fit)</span> behaves as <span class="css">repeat(auto-fill)</span> when the other axis is a <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①②">masonry axis</a>. The reason for this is that <span class="css">auto</span>-placed items depend on the layout size of its siblings. Removing empty tracks after layout wouldn’t be possible in most cases since it might affect any intrinsic track sizes. Even if all track sizes are definite the containing block size could change for grid-aligned abs.pos. descendants. This makes <span class="css">repeat(auto-fit)</span> impossible to support in a grid container with masonry layout.</p>
|
||
<h2 class="heading settled" data-level="5" id="#implicit-grid"><span class="secno">5. </span><span class="content"> The Implicit Grid </span><a class="self-link" href="#%23implicit-grid"></a></h2>
|
||
The <dfn data-dfn-type="dfn" data-noexport id="implicit-grid">implicit grid<a class="self-link" href="#implicit-grid"></a></dfn> is formed in the same way as for a <a href="https://drafts.csswg.org/css-grid/#implicit-grids">regular grid container</a>. However, it’s only used in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②②">grid axis</a>. The flow axis specified by <span class="css">grid-auto-flow</span> is ignored — items are always placed by filling the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②③">grid axis</a> (note that the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-auto-flow-dense" id="ref-for-valdef-grid-auto-flow-dense">dense</a> keyword does have an effect though in determining which items end up at line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①③">masonry axis</a>, in <a href="#grid-item-placement">§ 2.2 Grid Item Placement</a> step 1). <span class="css">direction:rtl</span> reverses the grid if the inline-axis is the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②④">grid axis</a> (as usual for a regular grid container) and it makes items flow from right to left if the inline-axis is the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①④">masonry axis</a>.
|
||
<div class="example" id="example-de83ba08">
|
||
<a class="self-link" href="#example-de83ba08"></a> Here’s a simple <a href="examples/rtl-grid-axis.html">example</a> using <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction: rtl</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑤">grid axis</a>:
|
||
<pre class="language-css highlight"><style>
|
||
.grid <c- p>{</c->
|
||
<c- k>display</c-><c- p>:</c-> inline-grid<c- p>;</c->
|
||
<c- k>direction</c-><c- p>:</c-> rtl<c- p>;</c->
|
||
<c- k>grid</c-><c- p>:</c-> masonry / <c- nf>repeat</c-><c- p>(</c-><c- m>4</c-><c- p>,</c-> <c- m>2</c-><c- k>ch</c-><c- p>);</c->
|
||
<c- k>border</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid<c- p>;</c->
|
||
<c- p>}</c->
|
||
|
||
item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver <c- p>}</c->
|
||
item<c- nf>:nth-child</c-><c- p>(</c-><c- m>2</c-><c- k>n</c-><c- m>+1</c-><c- p>)</c-> <c- p>{</c->
|
||
<c- k>background</c-><c- p>:</c-> pink<c- p>;</c->
|
||
<c- k>height</c-><c- p>:</c-> <c- m>4</c-><c- k>em</c-><c- p>;</c->
|
||
<c- p>}</c->
|
||
</style>
|
||
</pre>
|
||
<pre class="language-html highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"grid"</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->1<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-> <c- e>style</c-><c- o>=</c-><c- s>"grid-column:span 2"</c-><c- p>></c->2<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->3<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->4<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p></</c-><c- f>div</c-><c- p>></c->
|
||
</pre>
|
||
<figure>
|
||
<img src="images/rtl-grid-axis.png">
|
||
<figcaption>Rendering of the <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction: rtl</a> example above.</figcaption>
|
||
</figure>
|
||
</div>
|
||
<div class="example" id="example-7150e913">
|
||
<a class="self-link" href="#example-7150e913"></a> Here’s a simple <a href="examples/rtl-masonry-axis.html">example</a> using <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction: rtl</a> in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⑤">masonry axis</a>:
|
||
<pre class="language-css highlight"><style>
|
||
.grid <c- p>{</c->
|
||
<c- k>display</c-><c- p>:</c-> inline-grid<c- p>;</c->
|
||
<c- k>direction</c-><c- p>:</c-> rtl<c- p>;</c->
|
||
<c- k>width</c-><c- p>:</c-> <c- m>10</c-><c- k>ch</c-><c- p>;</c->
|
||
<c- k>column-gap</c-><c- p>:</c-> <c- m>1</c-><c- k>ch</c-><c- p>;</c->
|
||
<c- k>grid</c-><c- p>:</c-> <c- nf>repeat</c-><c- p>(</c-><c- m>4</c-><c- p>,</c-> <c- m>2</c-><c- k>em</c-><c- p>)</c-> / masonry<c- p>;</c->
|
||
<c- k>border</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid<c- p>;</c->
|
||
<c- p>}</c->
|
||
|
||
item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver <c- p>}</c->
|
||
item<c- nf>:nth-child</c-><c- p>(</c-><c- m>2</c-><c- k>n</c-><c- m>+1</c-><c- p>)</c-> <c- p>{</c->
|
||
<c- k>background</c-><c- p>:</c-> pink<c- p>;</c->
|
||
<c- k>width</c-><c- p>:</c-> <c- m>4</c-><c- k>ch</c-><c- p>;</c->
|
||
<c- p>}</c->
|
||
</style>
|
||
</pre>
|
||
<pre class="language-html highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"grid"</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->1<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-> <c- e>style</c-><c- o>=</c-><c- s>"grid-row:span 2"</c-><c- p>></c->2<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->3<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->4<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p></</c-><c- f>div</c-><c- p>></c->
|
||
</pre>
|
||
<figure>
|
||
<img src="images/rtl-masonry-axis.png">
|
||
<figcaption>Rendering of the <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction③">direction: rtl</a> example above.</figcaption>
|
||
</figure>
|
||
</div>
|
||
<h2 class="heading settled" data-level="6" id="intrinsic-sizes"><span class="secno">6. </span><span class="content"> Sizing Grid Containers</span><a class="self-link" href="#intrinsic-sizes"></a></h2>
|
||
<p><a href="https://drafts.csswg.org/css-grid-2/#intrinsic-sizes">Sizing Grid Containers</a> works the same as for regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑦">grid containers</a> but with the following addendum for the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⑥">masonry axis</a>: The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content">max-content size</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content">min-content size</a>) of a grid container in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⑦">masonry axis</a> is the largest distance between the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑧">grid container’s</a> content-box start edge and the maximum margin-box end of all the items, when sized under a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint" id="ref-for-max-content-constraint">max-content constraint</a> (<a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint" id="ref-for-min-content-constraint">min-content constraint</a>).</p>
|
||
<div class="example" id="example-759140be">
|
||
<a class="self-link" href="#example-759140be"></a> Here’s a simple <a href="examples/grid-intrinsic-sizing-example-1.html">example</a>:
|
||
<pre class="language-css highlight"><style>
|
||
.grid <c- p>{</c->
|
||
<c- k>display</c-><c- p>:</c-> inline-grid<c- p>;</c->
|
||
<c- k>grid</c-><c- p>:</c-> masonry / <c- m>50</c-><c- k>px</c-> <c- m>100</c-><c- k>px</c-> auto<c- p>;</c->
|
||
<c- k>grid-gap</c-><c- p>:</c-> <c- m>10</c-><c- k>px</c-><c- p>;</c->
|
||
<c- k>border</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid<c- p>;</c->
|
||
<c- p>}</c->
|
||
item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>margin</c-><c- p>:</c-> <c- m>5</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c->
|
||
</style>
|
||
</pre>
|
||
<pre class="language-html highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"grid"</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-> <c- e>style</c-><c- o>=</c-><c- s>"border:10px solid"</c-><c- p>></c->1<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->2<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->3<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-> <c- e>style</c-><c- o>=</c-><c- s>"height:50px"</c-><c- p>></c->4<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->5<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->6<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p></</c-><c- f>div</c-><c- p>></c->
|
||
</pre>
|
||
<figure>
|
||
<img src="images/grid-intrinsic-sizing-example-1.png">
|
||
<figcaption>Rendering of the grid container intrinsic sizing example above.</figcaption>
|
||
</figure>
|
||
</div>
|
||
<h2 class="heading settled" data-level="7" id="alignment"><span class="secno">7. </span><span class="content"> Alignment and Spacing</span><a class="self-link" href="#alignment"></a></h2>
|
||
<p><a href="https://www.w3.org/TR/css-grid-2/#gutters">Gutters</a> are supported in both axes. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⑧">masonry axis</a> the gap is applied between each pair of adjacent items margin-box. Margins do not collapse in either axis.</p>
|
||
<p><a href="https://drafts.csswg.org/css-grid-2/#alignment">Alignment</a> works the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑨">grid container</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑥">grid axis</a>.</p>
|
||
<p><a href="https://drafts.csswg.org/css-align/#content-distribution">Content Distribution</a> in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⑨">masonry axis</a> is applied to the content as a whole, same as for block containers. More specifically, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-subject" id="ref-for-alignment-subject">alignment subject</a> is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="masonry-box">masonry box</dfn>, which is the area formed by the content-box edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⓪">grid container</a> to the margin-box end edge of the item that is the furthest away in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⓪">masonry axis</a>, as indicated by the dashed border here:</p>
|
||
<figure>
|
||
<img src="images/masonry-box.png">
|
||
<figcaption> The extent of the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box">masonry box</a> is indicated by the dashed border.
|
||
(Note that item 1 has a 5px bottom margin here.) </figcaption>
|
||
</figure>
|
||
<p>Note that there is only ever one <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-subject" id="ref-for-alignment-subject①">alignment subject</a> for these properties in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②①">masonry axis</a>, so the unique <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content">align-content</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content">justify-content</a> values boil down to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start" id="ref-for-valdef-self-position-start">start</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center" id="ref-for-valdef-self-position-center">center</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end" id="ref-for-valdef-self-position-end">end</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch">stretch</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment">baseline alignment</a>. (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal">normal</a> behaves as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch①">stretch</a> as usual for <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①①">grid containers</a>). In the figure above the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①②">grid container</a> has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content①">align-content: start</a>. By default, the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box①">masonry box</a> is the same as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①③">grid container</a>'s content-box due to being stretched.</p>
|
||
<h3 class="heading settled" data-level="7.1" id="tracks-alignment"><span class="secno">7.1. </span><span class="content"> The align-tracks and justify-tracks Properties </span><a class="self-link" href="#tracks-alignment"></a></h3>
|
||
<p>This specification adds two new properties to align the items in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②②">masonry axis</a> for each individual <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑦">grid axis</a> track:</p>
|
||
<table class="def propdef" data-link-for-hint="align-tracks">
|
||
<tbody>
|
||
<tr>
|
||
<th>Name:
|
||
<td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-align-tracks">align-tracks</dfn>
|
||
<tr class="value">
|
||
<th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
|
||
<td class="prod">[normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" id="ref-for-typedef-baseline-position" title="Expands to: baseline | first | last"><baseline-position></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" id="ref-for-typedef-content-distribution" title="Expands to: space-around | space-between | space-evenly | stretch"><content-distribution></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" id="ref-for-typedef-overflow-position" title="Expands to: safe | unsafe"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" id="ref-for-typedef-content-position" title="Expands to: center | end | flex-end | flex-start | start"><content-position></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a>
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
|
||
<td>normal
|
||
<tr>
|
||
<th>Applies to:
|
||
<td><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①④">grid containers</a> with masonry layout in their block axis
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
|
||
<td>no
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
|
||
<td>n/a
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
|
||
<td>specified keyword(s)
|
||
<tr>
|
||
<th>Canonical order:
|
||
<td>per grammar
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
|
||
<td>discrete
|
||
</table>
|
||
<table class="def propdef" data-link-for-hint="justify-tracks">
|
||
<tbody>
|
||
<tr>
|
||
<th>Name:
|
||
<td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-justify-tracks">justify-tracks</dfn>
|
||
<tr class="value">
|
||
<th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
|
||
<td class="prod">[normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" id="ref-for-typedef-content-distribution①" title="Expands to: space-around | space-between | space-evenly | stretch"><content-distribution></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" id="ref-for-typedef-overflow-position①" title="Expands to: safe | unsafe"><overflow-position></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> [ <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" id="ref-for-typedef-content-position①" title="Expands to: center | end | flex-end | flex-start | start"><content-position></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> left <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> right ] ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a>
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
|
||
<td>normal
|
||
<tr>
|
||
<th>Applies to:
|
||
<td><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑤">grid containers</a> with masonry layout in their inline axis
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
|
||
<td>no
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
|
||
<td>n/a
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
|
||
<td>specified keyword(s)
|
||
<tr>
|
||
<th>Canonical order:
|
||
<td>per grammar
|
||
<tr>
|
||
<th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
|
||
<td>discrete
|
||
</table>
|
||
<p class="note" role="note"><span>Note:</span> These values are the same as for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content②">align-content</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content①">justify-content</a>, but here we accept multiple values in a comma-separated list.</p>
|
||
<p>Unlike <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content③">align-content</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content②">justify-content</a>, <span class="css">normal</span> behaves as <span class="css">start</span> for these properties. So the default rendering is the expected packed masonry layout as shown in the top left corner in the example below. When multiple values are specified the first track in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑧">grid axis</a> uses the first value, the second track uses the second value, etc. If there are fewer values than tracks then the last value is used for the remaining tracks. If there are more values than tracks then the remaining values have no effect on the rendering.</p>
|
||
<div class="example" id="example-9dcbe46d">
|
||
<a class="self-link" href="#example-9dcbe46d"></a> Here’s a <a href="examples/align-tracks-example-1.html">testcase</a> that demonstrates a few <a class="property" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks">align-tracks</a> alignment possibilities.
|
||
<figure>
|
||
<img src="images/align-tracks-example-1.png">
|
||
<figcaption> The rendering of the <span class="css">align-tracks</span> example above. </figcaption>
|
||
</figure>
|
||
</div>
|
||
<h3 class="heading settled" data-level="7.2" id="masonry-axis-stretch-alignment"><span class="secno">7.2. </span><span class="content"> Stretch Alignment in the Masonry Axis</span><a class="self-link" href="#masonry-axis-stretch-alignment"></a></h3>
|
||
<p><span class="css">stretch</span> will stretch the items in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②③">masonry axis</a> for each track separately to fill the content-box. Any item can opt out from stretching by setting <span class="css">align-self</span> / <span class="css">justify-self</span> to something other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-normal" id="ref-for-valdef-align-self-normal">normal</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch">stretch</a> in the relevant axis. Items with a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#definite" id="ref-for-definite">definite size</a> don’t stretch and items with an <span class="css">auto</span> margin in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②④">masonry axis</a> stretch by increasing its margin(s) instead of its content-box size. An item only grows up to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width">max size</a>.</p>
|
||
<div class="example" id="example-86b8c3a5">
|
||
<a class="self-link" href="#example-86b8c3a5"></a> Here’s a <a href="examples/align-tracks-example-2.html">testcase</a> that demonstrates stretching items in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑤">masonry axis</a>.
|
||
<figure>
|
||
<video controls src="images/align-tracks-example-2.webm"></video>
|
||
<figcaption> Visualization of the <a class="css" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks①">align-tracks: stretch</a> example above. </figcaption>
|
||
</figure>
|
||
<p>Only the purple items have <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a> height, so they are the ones that may grow by default. A few items worth noting: item 4 has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height" id="ref-for-propdef-max-height">max-height: 40px</a> so it only grows up to that size and then the other items in its track picks up the remaining size. Item 16 opts out from resizing by setting <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" id="ref-for-propdef-align-self">align-self: end</a>. Item 18 has <span class="css">bottom: auto</span> so it’s centered in its allotted space instead of growing. Item 20 has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top: auto</a> so it’s aligned to the end while its top-margin grows.</p>
|
||
</div>
|
||
<div class="example" id="example-9a8520b9">
|
||
<a class="self-link" href="#example-9a8520b9"></a> Here’s the corresponding <a href="examples/justify-tracks-example-1.html">testcase</a> with a masonry inline-axis instead.
|
||
<figure>
|
||
<video controls src="images/justify-tracks-example-1.webm"></video>
|
||
<figcaption> Visualization of the <a class="css" data-link-type="propdesc" href="#propdef-justify-tracks" id="ref-for-propdef-justify-tracks">justify-tracks: stretch</a> example above. </figcaption>
|
||
</figure>
|
||
</div>
|
||
<h3 class="heading settled" data-level="7.3" id="masonry-axis-alignment"><span class="secno">7.3. </span><span class="content"> Individual Track Alignment in the Masonry Axis</span><a class="self-link" href="#masonry-axis-alignment"></a></h3>
|
||
<p><span class="css">align-tracks</span> / <span class="css">justify-tracks</span> values can be specified per track.</p>
|
||
<div class="example" id="example-970a421a">
|
||
<a class="self-link" href="#example-970a421a"></a> Here’s an <a href="examples/masonry-axis-alignment-1.html">example</a> to illustrate this. Note that the <a class="property" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks②">align-tracks</a> value intentionally has one value less than the number of tracks to illustrate that the remaining track(s) use the last value (i.e. the right-most track also uses <span class="css">space-evenly</span>). (<span class="css">baseline</span> values are also supported but excluded in this test, see <a href="#masonry-axis-baseline-alignment">§ 7.4 Baseline Alignment in the Masonry Axis</a> for a description how that works with examples.)
|
||
<figure>
|
||
<img src="images/masonry-axis-alignment-1.png">
|
||
<figcaption> Rendering of the <span class="css">align-tracks</span> alignment example above. </figcaption>
|
||
</figure>
|
||
</div>
|
||
<h3 class="heading settled" data-level="7.4" id="masonry-axis-baseline-alignment"><span class="secno">7.4. </span><span class="content"> Baseline Alignment in the Masonry Axis</span><a class="self-link" href="#masonry-axis-baseline-alignment"></a></h3>
|
||
<p>Item <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment①">baseline alignment</a> inside the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑨">grid axis</a> tracks works as usual for a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑥">grid container</a>, and the grid container’s baseline is determined the same as for a regular grid container in that axis.</p>
|
||
<p><a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment②">Baseline alignment</a> is supported also in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑥">masonry axis</a>, on the first and last item in each track (but not on items "in the middle" of the track). Only tracks with the <a class="property" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks③">align-tracks</a> / <a class="property" data-link-type="propdesc" href="#propdef-justify-tracks" id="ref-for-propdef-justify-tracks①">justify-tracks</a> values <span class="css">start</span>, <span class="css">end</span> or <span class="css">stretch</span>, support baseline alignment. There are four different sets of <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-sharing-group" id="ref-for-baseline-sharing-group">baseline-sharing groups</a>:</p>
|
||
<ol>
|
||
<li>the first item in each <span class="css">start</span> track + the first item in each <span class="css">stretch</span> track
|
||
<li>the last item in each <span class="css">start</span> track
|
||
<li>the first item in each <span class="css">end</span> track
|
||
<li>the last item in each <span class="css">end</span> track + the last item in each <span class="css">stretch</span> track
|
||
</ol>
|
||
<p>Each of those sets can have a <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#first-baseline-set" id="ref-for-first-baseline-set">first baseline set</a> and a <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#last-baseline-set" id="ref-for-last-baseline-set">last baseline set</a>, resulting in eight unique baseline sets in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑦">masonry axis</a>.</p>
|
||
<p class="issue" id="issue-0877829d"><a class="self-link" href="#issue-0877829d"></a> specify how the grid container’s first(last) baseline in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑧">masonry axis</a> is determined</p>
|
||
<div class="example" id="example-ec1263df">
|
||
<a class="self-link" href="#example-ec1263df"></a> Here’s an <a href="examples/masonry-axis-baseline-alignment-1.html">example</a> illustrating all eight possibilities.
|
||
(The example uses two separate <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑦">grid containers</a> to illustrate the first ("F") and last ("L") baseline sets to avoid cluttering the illustration, but it is possible to use all eight sets in the same container.) The aligned baselines are indicated with red color. Note that the tracks that are attached to the end side of the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box②">masonry box</a> adjust the padding (or margin in the case of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" id="ref-for-propdef-align-self①">align-self</a>) on the end side, whereas tracks attached to the start side adjust the start padding/margin. (only <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content④">align-content</a> is used in this example, which adjusts the padding, since it’s easier to see the baseline adjustment. <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" id="ref-for-propdef-align-self②">align-self</a> can also be used, or a mix of the two, as usual.)
|
||
<figure>
|
||
<img src="images/masonry-axis-baseline-alignment-1.png">
|
||
<figcaption> The rendering of the example above. </figcaption>
|
||
</figure>
|
||
</div>
|
||
<p class="issue" id="issue-7304afcc"><a class="self-link" href="#issue-7304afcc"></a> this needs more details about edge cases, caveat about misalignment in stretch, etc</p>
|
||
<p><strong class="advisement"> Authors are advised to be careful with using alignment values other than <span class="css">start</span> when some items span more than one track, because it’s easy to cause items to unintentionally overlap in this case.</strong></p>
|
||
<p class="issue" id="issue-3a363cba"><a class="self-link" href="#issue-3a363cba"></a> can we make stretch alignment (at least) smarter so that we avoid overlapping spanning items in a few more cases that would be useful to authors?</p>
|
||
<h2 class="heading settled" data-level="8" id="pagination"><span class="secno">8. </span><span class="content"> Fragmentation</span><a class="self-link" href="#pagination"></a></h2>
|
||
<h3 class="heading settled" data-level="8.1" id="masonry-axis-pagination"><span class="secno">8.1. </span><span class="content"> Fragmentation in the Masonry Axis</span><a class="self-link" href="#masonry-axis-pagination"></a></h3>
|
||
<p>Each <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③⓪">grid axis</a> track is fragmented independently in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑨">masonry axis</a>. If a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑥">grid item</a> is fragmented, or has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#forced-break" id="ref-for-forced-break">forced break</a> before/after it, then the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position⑥">running position</a> for the tracks that it spans in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③①">grid axis</a> are set to the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentainer" id="ref-for-fragmentainer">fragmentainer</a> so that no further items will be placed in those tracks. An item that is split into multiple fragments retains its placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③②">grid axis</a> for all its fragments. A grid item that is pushed however, is placed again by the next grid container fragment. Placement continues until all items are placed or pushed to a new fragment.</p>
|
||
<div class="example" id="example-b489c79e">
|
||
<a class="self-link" href="#example-b489c79e"></a> Here’s an <a href="examples/fragmentation-block-axis-example.html">example</a> illustrating fragmentation of a grid with masonry layout in its block-axis. It renders like this:
|
||
<figure style="max-width:100%">
|
||
<video controls src="images/fragmentation-block-axis-example.webm" style="max-width:100%"></video>
|
||
<figcaption> Visualization of fragmentation in a block-axis masonry layout. </figcaption>
|
||
</figure>
|
||
</div>
|
||
<h3 class="heading settled" data-level="8.2" id="grid-axis-pagination"><span class="secno">8.2. </span><span class="content"> Fragmentation in the Grid Axis</span><a class="self-link" href="#grid-axis-pagination"></a></h3>
|
||
<p>Fragmentation in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③③">grid axis</a> with masonry layout in the other axis is also supported. In this case the fragmentation behaves more like in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑧">grid container</a>, however which <a data-link-type="dfn">grid-axis</a> track each item is placed into occurs as a separate step upfront before fragmentation occurs.</p>
|
||
<div class="example" id="example-740b4428">
|
||
<a class="self-link" href="#example-740b4428"></a> Here’s an <a href="examples/fragmentation-inline-axis-example.html">example</a> illustrating fragmentation of a grid with masonry layout in its inline-axis. In this case the breaks occurs between the <a data-link-type="dfn">grid-axis</a> rows. It renders like this:
|
||
<figure style="max-width:100%">
|
||
<video controls src="images/fragmentation-inline-axis-example.webm" style="max-width:100%"></video>
|
||
<figcaption> Visualization of fragmentation in the block-axis with inline-axis masonry layout. </figcaption>
|
||
</figure>
|
||
</div>
|
||
<h2 class="heading settled" data-level="9" id="subgrids"><span class="secno">9. </span><span class="content"> Subgrids</span><a class="self-link" href="#subgrids"></a></h2>
|
||
<p>Masonry layout is supported also in <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#subgrid" id="ref-for-subgrid">subgrids</a> (e.g. <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid" id="ref-for-propdef-grid">grid: subgrid / masonry</a>). However, only a parent grid axis can be subgridded in the normal sense. A subgrid axis with a parent <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⓪">masonry axis</a> will behave as <span class="css">masonry</span>, unless the subgrid’s other axis is also <span class="css">masonry</span> in which case it behaves as <span class="css">none</span> (a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑨">grid container</a> can only have one <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③①">masonry axis</a>). <span class="css">auto</span>-placed subgrids don’t inherit any line names from their parent grid because that would make the placement of the subgrid’s grid items dependent on layout results, but subgrid’s tracks are aligned to the parent’s tracks as usual. Here’s a subgrid <a href="examples/subgrid-example-1.html">example</a>:</p>
|
||
<div class="example" id="example-5da4ab29">
|
||
<a class="self-link" href="#example-5da4ab29"></a>
|
||
<pre class="language-css highlight"><style>
|
||
.grid <c- p>{</c->
|
||
<c- k>display</c-><c- p>:</c-> inline-grid<c- p>;</c->
|
||
<c- k>grid</c-><c- p>:</c-> auto auto <c- m>100</c-><c- k>px</c-> / masonry<c- p>;</c->
|
||
<c- k>align-content</c-><c- p>:</c-> center<c- p>;</c->
|
||
<c- k>height</c-><c- p>:</c-> <c- m>300</c-><c- k>px</c-><c- p>;</c->
|
||
<c- k>border</c-><c- p>:</c-> <c- m>1</c-><c- k>px</c-> solid<c- p>;</c->
|
||
<c- p>}</c->
|
||
|
||
.grid > * <c- p>{</c->
|
||
<c- k>margin</c-><c- p>:</c-> <c- m>5</c-><c- k>px</c-><c- p>;</c->
|
||
<c- k>background</c-><c- p>:</c-> silver<c- p>;</c->
|
||
<c- p>}</c->
|
||
.grid > <c- nf>:nth-child</c-><c- p>(</c-><c- m>2</c-><c- k>n</c-><c- p>)</c-> <c- p>{</c->
|
||
<c- k>background</c-><c- p>:</c-> pink<c- p>;</c->
|
||
<c- p>}</c->
|
||
|
||
.grid subgrid <c- p>{</c->
|
||
<c- k>display</c-><c- p>:</c-> grid<c- p>;</c->
|
||
<c- k>grid</c-><c- p>:</c-> subgrid / subgrid<c- p>;</c->
|
||
<c- k>grid-row</c-><c- p>:</c-> <c- m>2</c-> / span <c- m>2</c-><c- p>;</c->
|
||
<c- k>grid-gap</c-><c- p>:</c-> <c- m>30</c-><c- k>px</c-><c- p>;</c->
|
||
<c- p>}</c->
|
||
.grid subgrid > * <c- p>{</c-> <c- k>background</c-><c- p>:</c-> cyan<c- p>;</c-> <c- p>}</c->
|
||
</style>
|
||
</pre>
|
||
<pre class="language-html highlight"><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"grid"</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->1<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->2<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->3<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>subgrid</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-> <c- e>style</c-><c- o>=</c-><c- s>"height:100px"</c-><c- p>></c->subgrid.1<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->sub.2<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->s.3<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p></</c-><c- f>subgrid</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->4<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->5<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-> <c- e>style</c-><c- o>=</c-><c- s>"width: 80px"</c-><c- p>></c->6<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p><</c-><c- f>item</c-><c- p>></c->7<c- p></</c-><c- f>item</c-><c- p>></c->
|
||
<c- p></</c-><c- f>div</c-><c- p>></c->
|
||
</pre>
|
||
<figure>
|
||
<img src="images/subgrid-example-1.png">
|
||
<figcaption> The rendering of the subgrid example above. </figcaption>
|
||
</figure>
|
||
<p>Note how the subgrid’s first item ("subgrid.1") contributes to the intrinsic size of the 2nd row in the parent grid. This is possible since the subgrid specified a definite placement so we know which tracks it will occupy. Note also that trying to subgrid the parent’s <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③②">masonry axis</a> results in the subgrid getting masonry layout in its inline-axis.</p>
|
||
</div>
|
||
<h2 class="heading settled" data-level="10" id="abspos"><span class="secno">10. </span><span class="content"> Absolute Positioning</span><a class="self-link" href="#abspos"></a></h2>
|
||
<p><a href="https://drafts.csswg.org/css-grid/#abspos-items">Grid-aligned absolute-positioned descendants</a> are supported. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③③">masonry axis</a> all <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-position" id="ref-for-grid-position">grid positions</a> except line 1 are treated as <a class="property" data-link-type="propdesc">auto</a>. Line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③④">masonry axis</a> corresponds to the start of the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box③">masonry box</a> (the content-box start edge usually) and <a class="property" data-link-type="propdesc">auto</a> uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②⓪">grid container</a> padding edge as usual. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a> is the extent of the tracks the item spans in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③④">grid axis</a> and the position of line 1 and the padding-box edge in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑤">masonry axis</a>.</p>
|
||
<p class="issue" id="issue-973214f0"><a class="self-link" href="#issue-973214f0"></a> It might be useful to define a static position in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑥">masonry axis</a> though, given that we only have a one line in that axis to align to. Maybe it could defined as the max (or min?) current <a data-link-type="dfn" href="#running-position" id="ref-for-running-position⑦">running position</a> of the <a data-link-type="dfn">grid-axis</a> tracks at that point?</p>
|
||
<p class="issue" id="issue-b2e5048b"><a class="self-link" href="#issue-b2e5048b"></a> It would also be useful to be able to align the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box④">masonry box</a> end edge somehow, but for that we need a way to address the <a href="https://github.com/w3c/csswg-drafts/issues/2402">end line in an implicit grid</a>, or could we just use any non-auto line number other than 1 to indicate the end line given that we don’t really have any lines in this axis other than line 1?</p>
|
||
<h2 class="heading settled" data-level="11" id="performance-notes"><span class="secno">11. </span><span class="content"> Performance Notes</span><a class="self-link" href="#performance-notes"></a></h2>
|
||
<p>In general, masonry layout should have significantly better performance than the equivalent regular (2-axis) grid layout, particularly when the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑦">masonry axis</a> is the block-axis since the intrinsic sizing of grid rows is typically quite expensive. Any intrinsic track sizing in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③⑤">grid axis</a> should be cheaper too, because, typically, only a subset of items contribute to the intrinsic sizing in a masonry layout, contrary to a 2-axis grid where all items spanning an intrinsically-sized track contribute. That said, <span class="css">align-tracks: stretch</span> specifically adds a cost proportionate to the number of items that are resized. (Note that <span class="css">stretch</span> isn’t the default value for these properties though.) Stretched items do a second layout with the new size (when it actually changed) so this can be costly if there are a huge amount of stretched items that each contains a lot of content. Especially nested stretched masonry layouts should be avoided unless they are small/trivial.</p>
|
||
<p><strong class="advisement"> This can be ameliorated by the author by opting out from the stretching on most items though, e.g. specifying <span class="css">align-items:start</span> and then opting in for just a few items with <span class="css">align-self:stretch</span> to let those items fill the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑧">masonry axis</a>. Other <a class="property" data-link-type="propdesc" href="#propdef-justify-tracks" id="ref-for-propdef-justify-tracks②">justify-tracks</a> / <a class="property" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks④">align-tracks</a> values such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center" id="ref-for-valdef-self-position-center①">center</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end" id="ref-for-valdef-self-position-end①">end</a> and '<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" id="ref-for-typedef-content-distribution②" title="Expands to: space-around | space-between | space-evenly | stretch"><content-distribution></a>' (other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch①">stretch</a>) shouldn’t be a problem though since they just reposition the items which is fast. (This performance analysis is from a Gecko perspective, but I suspect there’s some truth to it for other layout engines as well.)</strong></p>
|
||
<h2 class="heading settled" data-level="12" id="graceful-degradation"><span class="secno">12. </span><span class="content"> Graceful Degradation</span><a class="self-link" href="#graceful-degradation"></a></h2>
|
||
<p>Typically, a masonry design can be expected to degrade quite nicely in a UA that supports Grid layout but not masonry layout if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid" id="ref-for-propdef-grid①">grid</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template" id="ref-for-propdef-grid-template">grid-template</a> shorthands are avoided and the longhands are used instead. e.g.</p>
|
||
<pre class="language-css highlight"> <c- k>grid-template-rows</c-><c- p>:</c-> masonry<c- p>;</c-> <c- c>/* ignored by UAs that don’t support it */</c->
|
||
grid-template-columns: <c- m>150</c-><c- k>px</c-> <c- m>100</c-><c- k>px</c-> <c- m>50</c-><c- k>px</c-><c- p>;</c->
|
||
</pre>
|
||
<div class="example" id="example-c14bcfdc">
|
||
<a class="self-link" href="#example-c14bcfdc"></a> Here’s an <a href="examples/graceful-degradation-example.html">example</a> to illustrate this. It’s a layout with three columns, but will have "more gaps" in the block-axis if the UA doesn’t support masonry layout. Here’s what it looks like with Masonry support for comparison:
|
||
<figure>
|
||
<video controls src="images/graceful-degradation-example.webm"></video>
|
||
<figcaption> Rendering of the example in a UA with Masonry support. </figcaption>
|
||
</figure>
|
||
</div>
|
||
<h2 class="heading settled" data-level="13" id="acknowledgements"><span class="secno">13. </span><span class="content"> Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
|
||
<p>Thanks goes to Cameron McCormack who wrote a masonry layout explainer document (from which I lifted the Background chapter) and presented it to the CSSWG. Thanks also to everyone who provided feedback on the <a href="https://github.com/w3c/csswg-drafts/issues/4650">initial proposal</a> for this feature.</p>
|
||
</main>
|
||
<div data-fill-with="conformance">
|
||
<h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
|
||
<p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
|
||
The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
|
||
in the normative parts of this document
|
||
are to be interpreted as described in RFC 2119.
|
||
However, for readability,
|
||
these words do not appear in all uppercase letters in this specification. </p>
|
||
<p> All of the text of this specification is normative
|
||
except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
|
||
<p> Examples in this specification are introduced with the words “for example”
|
||
or are set apart from the normative text with <code>class="example"</code>, like this: </p>
|
||
<div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
|
||
<p> Informative notes begin with the word “Note”
|
||
and are set apart from the normative text with <code>class="note"</code>, like this: </p>
|
||
<p class="note" role="note"> Note, this is an informative note. </p>
|
||
</div>
|
||
<script>
|
||
(function() {
|
||
"use strict";
|
||
var collapseSidebarText = '<span aria-hidden="true">←</span> '
|
||
+ '<span>Collapse Sidebar</span>';
|
||
var expandSidebarText = '<span aria-hidden="true">→</span> '
|
||
+ '<span>Pop Out Sidebar</span>';
|
||
var tocJumpText = '<span aria-hidden="true">↑</span> '
|
||
+ '<span>Jump to Table of Contents</span>';
|
||
|
||
var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
|
||
var autoToggle = function(e){ toggleSidebar(e.matches) };
|
||
if(sidebarMedia.addListener) {
|
||
sidebarMedia.addListener(autoToggle);
|
||
}
|
||
|
||
function toggleSidebar(on) {
|
||
if (on == undefined) {
|
||
on = !document.body.classList.contains('toc-sidebar');
|
||
}
|
||
|
||
/* Don’t scroll to compensate for the ToC if we’re above it already. */
|
||
var headY = 0;
|
||
var head = document.querySelector('.head');
|
||
if (head) {
|
||
// terrible approx of "top of ToC"
|
||
headY += head.offsetTop + head.offsetHeight;
|
||
}
|
||
var skipScroll = window.scrollY < headY;
|
||
|
||
var toggle = document.getElementById('toc-toggle');
|
||
var tocNav = document.getElementById('toc');
|
||
if (on) {
|
||
var tocHeight = tocNav.offsetHeight;
|
||
document.body.classList.add('toc-sidebar');
|
||
document.body.classList.remove('toc-inline');
|
||
toggle.innerHTML = collapseSidebarText;
|
||
if (!skipScroll) {
|
||
window.scrollBy(0, 0 - tocHeight);
|
||
}
|
||
tocNav.focus();
|
||
sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
|
||
}
|
||
else {
|
||
document.body.classList.add('toc-inline');
|
||
document.body.classList.remove('toc-sidebar');
|
||
toggle.innerHTML = expandSidebarText;
|
||
if (!skipScroll) {
|
||
window.scrollBy(0, tocNav.offsetHeight);
|
||
}
|
||
if (toggle.matches(':hover')) {
|
||
/* Unfocus button when not using keyboard navigation,
|
||
because I don’t know where else to send the focus. */
|
||
toggle.blur();
|
||
}
|
||
}
|
||
}
|
||
|
||
function createSidebarToggle() {
|
||
/* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
|
||
var toggle = document.createElement('a');
|
||
/* This should probably be a button, but appearance isn’t standards-track.*/
|
||
toggle.id = 'toc-toggle';
|
||
toggle.class = 'toc-toggle';
|
||
toggle.href = '#toc';
|
||
toggle.innerHTML = collapseSidebarText;
|
||
|
||
sidebarMedia.addListener(autoToggle);
|
||
var toggler = function(e) {
|
||
e.preventDefault();
|
||
sidebarMedia.removeListener(autoToggle); // persist explicit off states
|
||
toggleSidebar();
|
||
return false;
|
||
}
|
||
toggle.addEventListener('click', toggler, false);
|
||
|
||
|
||
/* Get <nav id=toc-nav>, or make it if we don’t have one. */
|
||
var tocNav = document.getElementById('toc-nav');
|
||
if (!tocNav) {
|
||
tocNav = document.createElement('p');
|
||
tocNav.id = 'toc-nav';
|
||
/* Prepend for better keyboard navigation */
|
||
document.body.insertBefore(tocNav, document.body.firstChild);
|
||
}
|
||
/* While we’re at it, make sure we have a Jump to Toc link. */
|
||
var tocJump = document.getElementById('toc-jump');
|
||
if (!tocJump) {
|
||
tocJump = document.createElement('a');
|
||
tocJump.id = 'toc-jump';
|
||
tocJump.href = '#toc';
|
||
tocJump.innerHTML = tocJumpText;
|
||
tocNav.appendChild(tocJump);
|
||
}
|
||
|
||
tocNav.appendChild(toggle);
|
||
}
|
||
|
||
var toc = document.getElementById('toc');
|
||
if (toc) {
|
||
createSidebarToggle();
|
||
toggleSidebar(sidebarMedia.matches);
|
||
|
||
/* If the sidebar has been manually opened and is currently overlaying the text
|
||
(window too small for the MQ to add the margin to body),
|
||
then auto-close the sidebar once you click on something in there. */
|
||
toc.addEventListener('click', function(e) {
|
||
if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
|
||
toggleSidebar(false);
|
||
}
|
||
}, false);
|
||
}
|
||
else {
|
||
console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
|
||
}
|
||
|
||
/* Wrap tables in case they overflow */
|
||
var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
|
||
var numTables = tables.length;
|
||
for (var i = 0; i < numTables; i++) {
|
||
var table = tables[i];
|
||
var wrapper = document.createElement('div');
|
||
wrapper.className = 'overlarge';
|
||
table.parentNode.insertBefore(wrapper, table);
|
||
wrapper.appendChild(table);
|
||
}
|
||
|
||
})();
|
||
</script>
|
||
<h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
|
||
<h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
|
||
<ul class="index">
|
||
<li><a href="#propdef-align-tracks">align-tracks</a><span>, in §7.1</span>
|
||
<li><a href="#grid-axis">grid axis</a><span>, in §2</span>
|
||
<li><a href="#implicit-grid">implicit grid</a><span>, in §5</span>
|
||
<li><a href="#propdef-justify-tracks">justify-tracks</a><span>, in §7.1</span>
|
||
<li><a href="#propdef-masonry-auto-flow">masonry-auto-flow</a><span>, in §2.3</span>
|
||
<li><a href="#masonry-axis">masonry axis</a><span>, in §2</span>
|
||
<li><a href="#masonry-box">masonry box</a><span>, in §7</span>
|
||
<li><a href="#running-position">running position</a><span>, in §2.3</span>
|
||
</ul>
|
||
<aside class="dfn-panel" data-for="term-for-typedef-baseline-position">
|
||
<a href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">https://drafts.csswg.org/css-align-3/#typedef-baseline-position</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-typedef-baseline-position">7.1.
|
||
The align-tracks and justify-tracks Properties </a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-typedef-content-distribution">
|
||
<a href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution">https://drafts.csswg.org/css-align-3/#typedef-content-distribution</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-typedef-content-distribution">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-typedef-content-distribution①">(2)</a>
|
||
<li><a href="#ref-for-typedef-content-distribution②">11.
|
||
Performance Notes</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-typedef-content-position">
|
||
<a href="https://drafts.csswg.org/css-align-3/#typedef-content-position">https://drafts.csswg.org/css-align-3/#typedef-content-position</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-typedef-content-position">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-typedef-content-position①">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-typedef-overflow-position">
|
||
<a href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position">https://drafts.csswg.org/css-align-3/#typedef-overflow-position</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-typedef-overflow-position">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-typedef-overflow-position①">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-align-content">
|
||
<a href="https://drafts.csswg.org/css-align-3/#propdef-align-content">https://drafts.csswg.org/css-align-3/#propdef-align-content</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-align-content">7.
|
||
Alignment and Spacing</a> <a href="#ref-for-propdef-align-content①">(2)</a>
|
||
<li><a href="#ref-for-propdef-align-content②">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-propdef-align-content③">(2)</a>
|
||
<li><a href="#ref-for-propdef-align-content④">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-align-self">
|
||
<a href="https://drafts.csswg.org/css-align-3/#propdef-align-self">https://drafts.csswg.org/css-align-3/#propdef-align-self</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-align-self">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-propdef-align-self①">7.4.
|
||
Baseline Alignment in the Masonry Axis</a> <a href="#ref-for-propdef-align-self②">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-alignment-subject">
|
||
<a href="https://drafts.csswg.org/css-align-3/#alignment-subject">https://drafts.csswg.org/css-align-3/#alignment-subject</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-alignment-subject">7.
|
||
Alignment and Spacing</a> <a href="#ref-for-alignment-subject①">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-baseline-alignment">
|
||
<a href="https://drafts.csswg.org/css-align-3/#baseline-alignment">https://drafts.csswg.org/css-align-3/#baseline-alignment</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-baseline-alignment">7.
|
||
Alignment and Spacing</a>
|
||
<li><a href="#ref-for-baseline-alignment①">7.4.
|
||
Baseline Alignment in the Masonry Axis</a> <a href="#ref-for-baseline-alignment②">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-baseline-sharing-group">
|
||
<a href="https://drafts.csswg.org/css-align-3/#baseline-sharing-group">https://drafts.csswg.org/css-align-3/#baseline-sharing-group</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-baseline-sharing-group">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-self-position-center">
|
||
<a href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">https://drafts.csswg.org/css-align-3/#valdef-self-position-center</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-self-position-center">7.
|
||
Alignment and Spacing</a>
|
||
<li><a href="#ref-for-valdef-self-position-center①">11.
|
||
Performance Notes</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-self-position-end">
|
||
<a href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">https://drafts.csswg.org/css-align-3/#valdef-self-position-end</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-self-position-end">7.
|
||
Alignment and Spacing</a>
|
||
<li><a href="#ref-for-valdef-self-position-end①">11.
|
||
Performance Notes</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-first-baseline-set">
|
||
<a href="https://drafts.csswg.org/css-align-3/#first-baseline-set">https://drafts.csswg.org/css-align-3/#first-baseline-set</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-first-baseline-set">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-justify-content">
|
||
<a href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">https://drafts.csswg.org/css-align-3/#propdef-justify-content</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-justify-content">7.
|
||
Alignment and Spacing</a>
|
||
<li><a href="#ref-for-propdef-justify-content①">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-propdef-justify-content②">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-last-baseline-set">
|
||
<a href="https://drafts.csswg.org/css-align-3/#last-baseline-set">https://drafts.csswg.org/css-align-3/#last-baseline-set</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-last-baseline-set">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-justify-content-normal">
|
||
<a href="https://drafts.csswg.org/css-align-3/#valdef-justify-content-normal">https://drafts.csswg.org/css-align-3/#valdef-justify-content-normal</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-justify-content-normal">7.
|
||
Alignment and Spacing</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-self-position-start">
|
||
<a href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">https://drafts.csswg.org/css-align-3/#valdef-self-position-start</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-self-position-start">7.
|
||
Alignment and Spacing</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-align-self-stretch">
|
||
<a href="https://drafts.csswg.org/css-align-3/#valdef-align-self-stretch">https://drafts.csswg.org/css-align-3/#valdef-align-self-stretch</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-align-self-stretch">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-valdef-align-self-stretch①">11.
|
||
Performance Notes</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-margin-top">
|
||
<a href="https://drafts.csswg.org/css-box-4/#propdef-margin-top">https://drafts.csswg.org/css-box-4/#propdef-margin-top</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-margin-top">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-forced-break">
|
||
<a href="https://drafts.csswg.org/css-break-4/#forced-break">https://drafts.csswg.org/css-break-4/#forced-break</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-forced-break">8.1.
|
||
Fragmentation in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-fragmentainer">
|
||
<a href="https://drafts.csswg.org/css-break-4/#fragmentainer">https://drafts.csswg.org/css-break-4/#fragmentainer</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-fragmentainer">8.1.
|
||
Fragmentation in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-blockify">
|
||
<a href="https://drafts.csswg.org/css-display-3/#blockify">https://drafts.csswg.org/css-display-3/#blockify</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-blockify">2.
|
||
Masonry Layout</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-containing-block">
|
||
<a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-containing-block">3.
|
||
Containing Block</a>
|
||
<li><a href="#ref-for-containing-block①">10.
|
||
Absolute Positioning</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-typedef-auto-track-list">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#typedef-auto-track-list">https://drafts.csswg.org/css-grid-2/#typedef-auto-track-list</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-typedef-auto-track-list">2.
|
||
Masonry Layout</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-typedef-line-name-list">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#typedef-line-name-list">https://drafts.csswg.org/css-grid-2/#typedef-line-name-list</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-typedef-line-name-list">2.
|
||
Masonry Layout</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-typedef-track-list">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#typedef-track-list">https://drafts.csswg.org/css-grid-2/#typedef-track-list</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-typedef-track-list">2.
|
||
Masonry Layout</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-grid-auto-flow-dense">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#valdef-grid-auto-flow-dense">https://drafts.csswg.org/css-grid-2/#valdef-grid-auto-flow-dense</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-grid-auto-flow-dense">5.
|
||
The Implicit Grid </a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-grid">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#propdef-grid">https://drafts.csswg.org/css-grid-2/#propdef-grid</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-grid">9.
|
||
Subgrids</a>
|
||
<li><a href="#ref-for-propdef-grid①">12.
|
||
Graceful Degradation</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-grid-area">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#grid-area">https://drafts.csswg.org/css-grid-2/#grid-area</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-grid-area">3.
|
||
Containing Block</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-grid-container">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#grid-container">https://drafts.csswg.org/css-grid-2/#grid-container</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-grid-container">2.
|
||
Masonry Layout</a> <a href="#ref-for-grid-container①">(2)</a> <a href="#ref-for-grid-container②">(3)</a> <a href="#ref-for-grid-container③">(4)</a> <a href="#ref-for-grid-container④">(5)</a> <a href="#ref-for-grid-container⑤">(6)</a>
|
||
<li><a href="#ref-for-grid-container⑥">2.3.
|
||
Masonry Layout Algorithm</a>
|
||
<li><a href="#ref-for-grid-container⑦">6.
|
||
Sizing Grid Containers</a> <a href="#ref-for-grid-container⑧">(2)</a>
|
||
<li><a href="#ref-for-grid-container⑨">7.
|
||
Alignment and Spacing</a> <a href="#ref-for-grid-container①⓪">(2)</a> <a href="#ref-for-grid-container①①">(3)</a> <a href="#ref-for-grid-container①②">(4)</a> <a href="#ref-for-grid-container①③">(5)</a>
|
||
<li><a href="#ref-for-grid-container①④">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-grid-container①⑤">(2)</a>
|
||
<li><a href="#ref-for-grid-container①⑥">7.4.
|
||
Baseline Alignment in the Masonry Axis</a> <a href="#ref-for-grid-container①⑦">(2)</a>
|
||
<li><a href="#ref-for-grid-container①⑧">8.2.
|
||
Fragmentation in the Grid Axis</a>
|
||
<li><a href="#ref-for-grid-container①⑨">9.
|
||
Subgrids</a>
|
||
<li><a href="#ref-for-grid-container②⓪">10.
|
||
Absolute Positioning</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-grid-item">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#grid-item">https://drafts.csswg.org/css-grid-2/#grid-item</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-grid-item">2.
|
||
Masonry Layout</a> <a href="#ref-for-grid-item①">(2)</a> <a href="#ref-for-grid-item②">(3)</a> <a href="#ref-for-grid-item③">(4)</a>
|
||
<li><a href="#ref-for-grid-item④">2.2.
|
||
Grid Item Placement</a>
|
||
<li><a href="#ref-for-grid-item⑤">3.
|
||
Containing Block</a>
|
||
<li><a href="#ref-for-grid-item⑥">8.1.
|
||
Fragmentation in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-grid-position">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#grid-position">https://drafts.csswg.org/css-grid-2/#grid-position</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-grid-position">10.
|
||
Absolute Positioning</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-grid-column">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column">https://drafts.csswg.org/css-grid-2/#propdef-grid-column</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-grid-column">2.
|
||
Masonry Layout</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-grid-row">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row">https://drafts.csswg.org/css-grid-2/#propdef-grid-row</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-grid-row">2.
|
||
Masonry Layout</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-grid-template">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template">https://drafts.csswg.org/css-grid-2/#propdef-grid-template</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-grid-template">12.
|
||
Graceful Degradation</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-grid-template-columns">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns">https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-grid-template-columns">2.
|
||
Masonry Layout</a> <a href="#termref-for-">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-grid-template-rows">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-rows">https://drafts.csswg.org/css-grid-2/#propdef-grid-template-rows</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-grid-template-rows">2.
|
||
Masonry Layout</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-grid-template-rows-none">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none">https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-grid-template-rows-none">2.
|
||
Masonry Layout</a> <a href="#ref-for-valdef-grid-template-rows-none①">(2)</a> <a href="#ref-for-valdef-grid-template-rows-none②">(3)</a>
|
||
<li><a href="#ref-for-valdef-grid-template-rows-none③">2.2.
|
||
Grid Item Placement</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-subgrid">
|
||
<a href="https://drafts.csswg.org/css-grid-2/#subgrid">https://drafts.csswg.org/css-grid-2/#subgrid</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-subgrid">9.
|
||
Subgrids</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-valdef-width-auto">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">https://drafts.csswg.org/css-sizing-3/#valdef-width-auto</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-valdef-width-auto">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-definite">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#definite">https://drafts.csswg.org/css-sizing-3/#definite</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-definite">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-max-width">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#max-width">https://drafts.csswg.org/css-sizing-3/#max-width</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-max-width">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-max-content-constraint">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#max-content-constraint">https://drafts.csswg.org/css-sizing-3/#max-content-constraint</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-max-content-constraint">6.
|
||
Sizing Grid Containers</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-max-content">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#max-content">https://drafts.csswg.org/css-sizing-3/#max-content</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-max-content">6.
|
||
Sizing Grid Containers</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-max-height">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height">https://drafts.csswg.org/css-sizing-3/#propdef-max-height</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-max-height">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-min-content-constraint">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#min-content-constraint">https://drafts.csswg.org/css-sizing-3/#min-content-constraint</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-min-content-constraint">6.
|
||
Sizing Grid Containers</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-min-content">
|
||
<a href="https://drafts.csswg.org/css-sizing-3/#min-content">https://drafts.csswg.org/css-sizing-3/#min-content</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-min-content">6.
|
||
Sizing Grid Containers</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-mult-comma">
|
||
<a href="https://drafts.csswg.org/css-values-4/#mult-comma">https://drafts.csswg.org/css-values-4/#mult-comma</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-mult-comma">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-mult-comma①">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-mult-opt">
|
||
<a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-mult-opt">2.
|
||
Masonry Layout</a>
|
||
<li><a href="#ref-for-mult-opt①">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-mult-opt②">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-css-wide-keywords">
|
||
<a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-css-wide-keywords">1.2.
|
||
Value Definitions</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-comb-one">
|
||
<a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-comb-one">2.
|
||
Masonry Layout</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a>
|
||
<li><a href="#ref-for-comb-one④">2.3.
|
||
Masonry Layout Algorithm</a> <a href="#ref-for-comb-one⑤">(2)</a>
|
||
<li><a href="#ref-for-comb-one⑥">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-comb-one⑦">(2)</a> <a href="#ref-for-comb-one⑧">(3)</a> <a href="#ref-for-comb-one⑨">(4)</a> <a href="#ref-for-comb-one①⓪">(5)</a> <a href="#ref-for-comb-one①①">(6)</a> <a href="#ref-for-comb-one①②">(7)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-comb-any">
|
||
<a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-comb-any">2.3.
|
||
Masonry Layout Algorithm</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="term-for-propdef-direction">
|
||
<a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">https://drafts.csswg.org/css-writing-modes-3/#propdef-direction</a><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-direction">5.
|
||
The Implicit Grid </a> <a href="#ref-for-propdef-direction①">(2)</a> <a href="#ref-for-propdef-direction②">(3)</a> <a href="#ref-for-propdef-direction③">(4)</a>
|
||
</ul>
|
||
</aside>
|
||
<h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
|
||
<ul class="index">
|
||
<li>
|
||
<a data-link-type="biblio">[css-align-3]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-typedef-baseline-position" style="color:initial"><baseline-position></span>
|
||
<li><span class="dfn-paneled" id="term-for-typedef-content-distribution" style="color:initial"><content-distribution></span>
|
||
<li><span class="dfn-paneled" id="term-for-typedef-content-position" style="color:initial"><content-position></span>
|
||
<li><span class="dfn-paneled" id="term-for-typedef-overflow-position" style="color:initial"><overflow-position></span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-align-content" style="color:initial">align-content</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-align-self" style="color:initial">align-self</span>
|
||
<li><span class="dfn-paneled" id="term-for-alignment-subject" style="color:initial">alignment subject</span>
|
||
<li><span class="dfn-paneled" id="term-for-baseline-alignment" style="color:initial">baseline alignment</span>
|
||
<li><span class="dfn-paneled" id="term-for-baseline-sharing-group" style="color:initial">baseline-sharing group</span>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-self-position-center" style="color:initial">center</span>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-self-position-end" style="color:initial">end</span>
|
||
<li><span class="dfn-paneled" id="term-for-first-baseline-set" style="color:initial">first baseline set</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-justify-content" style="color:initial">justify-content</span>
|
||
<li><span class="dfn-paneled" id="term-for-last-baseline-set" style="color:initial">last baseline set</span>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-justify-content-normal" style="color:initial">normal <small>(for justify-content)</small></span>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-self-position-start" style="color:initial">start</span>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-align-self-stretch" style="color:initial">stretch <small>(for align-self)</small></span>
|
||
</ul>
|
||
<li>
|
||
<a data-link-type="biblio">[css-box-4]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-margin-top" style="color:initial">margin-top</span>
|
||
</ul>
|
||
<li>
|
||
<a data-link-type="biblio">[css-break-4]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-forced-break" style="color:initial">forced break</span>
|
||
<li><span class="dfn-paneled" id="term-for-fragmentainer" style="color:initial">fragmentainer</span>
|
||
</ul>
|
||
<li>
|
||
<a data-link-type="biblio">[css-display-3]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-blockify" style="color:initial">blockify</span>
|
||
<li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
|
||
</ul>
|
||
<li>
|
||
<a data-link-type="biblio">[css-grid-2]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-typedef-auto-track-list" style="color:initial"><auto-track-list></span>
|
||
<li><span class="dfn-paneled" id="term-for-typedef-line-name-list" style="color:initial"><line-name-list></span>
|
||
<li><span class="dfn-paneled" id="term-for-typedef-track-list" style="color:initial"><track-list></span>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-grid-auto-flow-dense" style="color:initial">dense</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-grid" style="color:initial">grid</span>
|
||
<li><span class="dfn-paneled" id="term-for-grid-area" style="color:initial">grid area</span>
|
||
<li><span class="dfn-paneled" id="term-for-grid-container" style="color:initial">grid container</span>
|
||
<li><span class="dfn-paneled" id="term-for-grid-item" style="color:initial">grid item</span>
|
||
<li><span class="dfn-paneled" id="term-for-grid-position" style="color:initial">grid position</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-grid-column" style="color:initial">grid-column</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-grid-row" style="color:initial">grid-row</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-grid-template" style="color:initial">grid-template</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-grid-template-columns" style="color:initial">grid-template-columns</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-grid-template-rows" style="color:initial">grid-template-rows</span>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-grid-template-rows-none" style="color:initial">none</span>
|
||
<li><span class="dfn-paneled" id="term-for-subgrid" style="color:initial">subgrid</span>
|
||
</ul>
|
||
<li>
|
||
<a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-valdef-width-auto" style="color:initial">auto</span>
|
||
<li><span class="dfn-paneled" id="term-for-definite" style="color:initial">definite size</span>
|
||
<li><span class="dfn-paneled" id="term-for-max-width" style="color:initial">max size</span>
|
||
<li><span class="dfn-paneled" id="term-for-max-content-constraint" style="color:initial">max-content constraint</span>
|
||
<li><span class="dfn-paneled" id="term-for-max-content" style="color:initial">max-content size</span>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-max-height" style="color:initial">max-height</span>
|
||
<li><span class="dfn-paneled" id="term-for-min-content-constraint" style="color:initial">min-content constraint</span>
|
||
<li><span class="dfn-paneled" id="term-for-min-content" style="color:initial">min-content size</span>
|
||
</ul>
|
||
<li>
|
||
<a data-link-type="biblio">[css-values-4]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-mult-comma" style="color:initial">#</span>
|
||
<li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
|
||
<li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
|
||
<li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
|
||
<li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
|
||
</ul>
|
||
<li>
|
||
<a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms:
|
||
<ul>
|
||
<li><span class="dfn-paneled" id="term-for-propdef-direction" style="color:initial">direction</span>
|
||
</ul>
|
||
</ul>
|
||
<h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
|
||
<h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
|
||
<dl>
|
||
<dt id="biblio-css-align-3">[CSS-ALIGN-3]
|
||
<dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Module Level 3</a>. 21 April 2020. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a>
|
||
<dt id="biblio-css-break-4">[CSS-BREAK-4]
|
||
<dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
|
||
<dt id="biblio-css-display-3">[CSS-DISPLAY-3]
|
||
<dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 19 May 2020. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
|
||
<dt id="biblio-css-grid-2">[CSS-GRID-2]
|
||
<dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid Layout Module Level 2</a>. 18 August 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</a>
|
||
<dt id="biblio-css-sizing-3">[CSS-SIZING-3]
|
||
<dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic & Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
|
||
<dt id="biblio-css-values-3">[CSS-VALUES-3]
|
||
<dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 6 June 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
|
||
<dt id="biblio-css-values-4">[CSS-VALUES-4]
|
||
<dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
|
||
<dt id="biblio-css2">[CSS2]
|
||
<dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
|
||
<dt id="biblio-rfc2119">[RFC2119]
|
||
<dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
|
||
</dl>
|
||
<h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
|
||
<dl>
|
||
<dt id="biblio-css-box-4">[CSS-BOX-4]
|
||
<dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/">CSS Box Model Module Level 4</a>. 21 April 2020. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a>
|
||
<dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
|
||
<dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 10 December 2019. REC. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a>
|
||
</dl>
|
||
<h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
|
||
<div class="big-element-wrapper">
|
||
<table class="index">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Name
|
||
<th scope="col">Value
|
||
<th scope="col">Initial
|
||
<th scope="col">Applies to
|
||
<th scope="col">Inh.
|
||
<th scope="col">%ages
|
||
<th scope="col">Animation type
|
||
<th scope="col">Canonical order
|
||
<th scope="col">Computed value
|
||
<tbody>
|
||
<tr>
|
||
<th scope="row"><a class="css" data-link-type="property" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks⑤">align-tracks</a>
|
||
<td>[normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>]#
|
||
<td>normal
|
||
<td>grid containers with masonry layout in their block axis
|
||
<td>no
|
||
<td>n/a
|
||
<td>discrete
|
||
<td>per grammar
|
||
<td>specified keyword(s)
|
||
<tr>
|
||
<th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-tracks" id="ref-for-propdef-justify-tracks③">justify-tracks</a>
|
||
<td>[normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] ]#
|
||
<td>normal
|
||
<td>grid containers with masonry layout in their inline axis
|
||
<td>no
|
||
<td>n/a
|
||
<td>discrete
|
||
<td>per grammar
|
||
<td>specified keyword(s)
|
||
<tr>
|
||
<th scope="row"><a class="css" data-link-type="property" href="#propdef-masonry-auto-flow" id="ref-for-propdef-masonry-auto-flow③">masonry-auto-flow</a>
|
||
<td>[ pack | next ] || [definite-first | ordered ]
|
||
<td>pack
|
||
<td>grid containers with masonry layout
|
||
<td>no
|
||
<td>n/a
|
||
<td>discrete
|
||
<td>per grammar
|
||
<td>specified keyword(s)
|
||
</table>
|
||
</div>
|
||
<h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
|
||
<div style="counter-reset:issue">
|
||
<div class="issue"> specify how the grid container’s first(last) baseline in the <a data-link-type="dfn" href="#masonry-axis">masonry axis</a> is determined<a href="#issue-0877829d"> ↵ </a></div>
|
||
<div class="issue"> this needs more details about edge cases, caveat about misalignment in stretch, etc<a href="#issue-7304afcc"> ↵ </a></div>
|
||
<div class="issue"> can we make stretch alignment (at least) smarter so that we avoid overlapping spanning items in a few more cases that would be useful to authors?<a href="#issue-3a363cba"> ↵ </a></div>
|
||
<div class="issue"> It might be useful to define a static position in the <a data-link-type="dfn" href="#masonry-axis">masonry axis</a> though, given that we only have a one line in that axis to align to. Maybe it could defined as the max (or min?) current <a data-link-type="dfn" href="#running-position">running position</a> of the <a data-link-type="dfn">grid-axis</a> tracks at that point?<a href="#issue-973214f0"> ↵ </a></div>
|
||
<div class="issue"> It would also be useful to be able to align the <a data-link-type="dfn" href="#masonry-box">masonry box</a> end edge somehow, but for that we need a way to address the <a href="https://github.com/w3c/csswg-drafts/issues/2402">end line in an implicit grid</a>, or could we just use any non-auto line number other than 1 to indicate the end line given that we don’t really have any lines in this axis other than line 1?<a href="#issue-b2e5048b"> ↵ </a></div>
|
||
</div>
|
||
<aside class="dfn-panel" data-for="masonry-axis">
|
||
<b><a href="#masonry-axis">#masonry-axis</a></b><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-masonry-axis">2.
|
||
Masonry Layout</a>
|
||
<li><a href="#ref-for-masonry-axis①">2.2.
|
||
Grid Item Placement</a> <a href="#ref-for-masonry-axis②">(2)</a> <a href="#ref-for-masonry-axis③">(3)</a> <a href="#ref-for-masonry-axis④">(4)</a>
|
||
<li><a href="#ref-for-masonry-axis⑤">2.3.
|
||
Masonry Layout Algorithm</a> <a href="#ref-for-masonry-axis⑥">(2)</a> <a href="#ref-for-masonry-axis⑦">(3)</a> <a href="#ref-for-masonry-axis⑧">(4)</a> <a href="#ref-for-masonry-axis⑨">(5)</a>
|
||
<li><a href="#ref-for-masonry-axis①⓪">3.
|
||
Containing Block</a>
|
||
<li><a href="#ref-for-masonry-axis①①">4.
|
||
Track sizing</a>
|
||
<li><a href="#ref-for-masonry-axis①②">4.1.
|
||
repeat(auto-fit)</a>
|
||
<li><a href="#ref-for-masonry-axis①③">5.
|
||
The Implicit Grid </a> <a href="#ref-for-masonry-axis①④">(2)</a> <a href="#ref-for-masonry-axis①⑤">(3)</a>
|
||
<li><a href="#ref-for-masonry-axis①⑥">6.
|
||
Sizing Grid Containers</a> <a href="#ref-for-masonry-axis①⑦">(2)</a>
|
||
<li><a href="#ref-for-masonry-axis①⑧">7.
|
||
Alignment and Spacing</a> <a href="#ref-for-masonry-axis①⑨">(2)</a> <a href="#ref-for-masonry-axis②⓪">(3)</a> <a href="#ref-for-masonry-axis②①">(4)</a>
|
||
<li><a href="#ref-for-masonry-axis②②">7.1.
|
||
The align-tracks and justify-tracks Properties </a>
|
||
<li><a href="#ref-for-masonry-axis②③">7.2.
|
||
Stretch Alignment in the Masonry Axis</a> <a href="#ref-for-masonry-axis②④">(2)</a> <a href="#ref-for-masonry-axis②⑤">(3)</a>
|
||
<li><a href="#ref-for-masonry-axis②⑥">7.4.
|
||
Baseline Alignment in the Masonry Axis</a> <a href="#ref-for-masonry-axis②⑦">(2)</a> <a href="#ref-for-masonry-axis②⑧">(3)</a>
|
||
<li><a href="#ref-for-masonry-axis②⑨">8.1.
|
||
Fragmentation in the Masonry Axis</a>
|
||
<li><a href="#ref-for-masonry-axis③⓪">9.
|
||
Subgrids</a> <a href="#ref-for-masonry-axis③①">(2)</a> <a href="#ref-for-masonry-axis③②">(3)</a>
|
||
<li><a href="#ref-for-masonry-axis③③">10.
|
||
Absolute Positioning</a> <a href="#ref-for-masonry-axis③④">(2)</a> <a href="#ref-for-masonry-axis③⑤">(3)</a> <a href="#ref-for-masonry-axis③⑥">(4)</a>
|
||
<li><a href="#ref-for-masonry-axis③⑦">11.
|
||
Performance Notes</a> <a href="#ref-for-masonry-axis③⑧">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="grid-axis">
|
||
<b><a href="#grid-axis">#grid-axis</a></b><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-grid-axis">2.
|
||
Masonry Layout</a> <a href="#ref-for-grid-axis①">(2)</a> <a href="#ref-for-grid-axis②">(3)</a>
|
||
<li><a href="#ref-for-grid-axis③">2.2.
|
||
Grid Item Placement</a> <a href="#ref-for-grid-axis④">(2)</a> <a href="#ref-for-grid-axis⑤">(3)</a>
|
||
<li><a href="#ref-for-grid-axis⑥">2.3.
|
||
Masonry Layout Algorithm</a> <a href="#ref-for-grid-axis⑦">(2)</a> <a href="#ref-for-grid-axis⑧">(3)</a> <a href="#ref-for-grid-axis⑨">(4)</a> <a href="#ref-for-grid-axis①⓪">(5)</a> <a href="#ref-for-grid-axis①①">(6)</a> <a href="#ref-for-grid-axis①②">(7)</a> <a href="#ref-for-grid-axis①③">(8)</a> <a href="#ref-for-grid-axis①④">(9)</a> <a href="#ref-for-grid-axis①⑤">(10)</a> <a href="#ref-for-grid-axis①⑥">(11)</a> <a href="#ref-for-grid-axis①⑦">(12)</a>
|
||
<li><a href="#ref-for-grid-axis①⑧">3.
|
||
Containing Block</a>
|
||
<li><a href="#ref-for-grid-axis①⑨">4.
|
||
Track sizing</a> <a href="#ref-for-grid-axis②⓪">(2)</a> <a href="#ref-for-grid-axis②①">(3)</a>
|
||
<li><a href="#ref-for-grid-axis②②">5.
|
||
The Implicit Grid </a> <a href="#ref-for-grid-axis②③">(2)</a> <a href="#ref-for-grid-axis②④">(3)</a> <a href="#ref-for-grid-axis②⑤">(4)</a>
|
||
<li><a href="#ref-for-grid-axis②⑥">7.
|
||
Alignment and Spacing</a>
|
||
<li><a href="#ref-for-grid-axis②⑦">7.1.
|
||
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-grid-axis②⑧">(2)</a>
|
||
<li><a href="#ref-for-grid-axis②⑨">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-grid-axis③⓪">8.1.
|
||
Fragmentation in the Masonry Axis</a> <a href="#ref-for-grid-axis③①">(2)</a> <a href="#ref-for-grid-axis③②">(3)</a>
|
||
<li><a href="#ref-for-grid-axis③③">8.2.
|
||
Fragmentation in the Grid Axis</a>
|
||
<li><a href="#ref-for-grid-axis③④">10.
|
||
Absolute Positioning</a>
|
||
<li><a href="#ref-for-grid-axis③⑤">11.
|
||
Performance Notes</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="running-position">
|
||
<b><a href="#running-position">#running-position</a></b><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-running-position">2.
|
||
Masonry Layout</a>
|
||
<li><a href="#ref-for-running-position①">2.3.
|
||
Masonry Layout Algorithm</a> <a href="#ref-for-running-position②">(2)</a> <a href="#ref-for-running-position③">(3)</a> <a href="#ref-for-running-position④">(4)</a> <a href="#ref-for-running-position⑤">(5)</a>
|
||
<li><a href="#ref-for-running-position⑥">8.1.
|
||
Fragmentation in the Masonry Axis</a>
|
||
<li><a href="#ref-for-running-position⑦">10.
|
||
Absolute Positioning</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="propdef-masonry-auto-flow">
|
||
<b><a href="#propdef-masonry-auto-flow">#propdef-masonry-auto-flow</a></b><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-masonry-auto-flow">2.3.
|
||
Masonry Layout Algorithm</a> <a href="#ref-for-propdef-masonry-auto-flow①">(2)</a> <a href="#ref-for-propdef-masonry-auto-flow②">(3)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="masonry-box">
|
||
<b><a href="#masonry-box">#masonry-box</a></b><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-masonry-box">7.
|
||
Alignment and Spacing</a> <a href="#ref-for-masonry-box①">(2)</a>
|
||
<li><a href="#ref-for-masonry-box②">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-masonry-box③">10.
|
||
Absolute Positioning</a> <a href="#ref-for-masonry-box④">(2)</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="propdef-align-tracks">
|
||
<b><a href="#propdef-align-tracks">#propdef-align-tracks</a></b><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-align-tracks">7.1.
|
||
The align-tracks and justify-tracks Properties </a>
|
||
<li><a href="#ref-for-propdef-align-tracks①">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-propdef-align-tracks②">7.3.
|
||
Individual Track Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-propdef-align-tracks③">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-propdef-align-tracks④">11.
|
||
Performance Notes</a>
|
||
</ul>
|
||
</aside>
|
||
<aside class="dfn-panel" data-for="propdef-justify-tracks">
|
||
<b><a href="#propdef-justify-tracks">#propdef-justify-tracks</a></b><b>Referenced in:</b>
|
||
<ul>
|
||
<li><a href="#ref-for-propdef-justify-tracks">7.2.
|
||
Stretch Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-propdef-justify-tracks①">7.4.
|
||
Baseline Alignment in the Masonry Axis</a>
|
||
<li><a href="#ref-for-propdef-justify-tracks②">11.
|
||
Performance Notes</a>
|
||
</ul>
|
||
</aside>
|
||
<script>/* script-dfn-panel */
|
||
|
||
document.body.addEventListener("click", function(e) {
|
||
var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
|
||
// Find the dfn element or panel, if any, that was clicked on.
|
||
var el = e.target;
|
||
var target;
|
||
var hitALink = false;
|
||
while(el.parentElement) {
|
||
if(el.tagName == "A") {
|
||
// Clicking on a link in a <dfn> shouldn't summon the panel
|
||
hitALink = true;
|
||
}
|
||
if(el.classList.contains("dfn-paneled")) {
|
||
target = "dfn";
|
||
break;
|
||
}
|
||
if(el.classList.contains("dfn-panel")) {
|
||
target = "dfn-panel";
|
||
break;
|
||
}
|
||
el = el.parentElement;
|
||
}
|
||
if(target != "dfn-panel") {
|
||
// Turn off any currently "on" or "activated" panels.
|
||
queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
|
||
el.classList.remove("on");
|
||
el.classList.remove("activated");
|
||
});
|
||
}
|
||
if(target == "dfn" && !hitALink) {
|
||
// open the panel
|
||
var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
|
||
if(dfnPanel) {
|
||
dfnPanel.classList.add("on");
|
||
var rect = el.getBoundingClientRect();
|
||
dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
|
||
dfnPanel.style.top = window.scrollY + rect.top + "px";
|
||
var panelRect = dfnPanel.getBoundingClientRect();
|
||
var panelWidth = panelRect.right - panelRect.left;
|
||
if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
|
||
// Reposition, because the panel is overflowing
|
||
dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
|
||
}
|
||
} else {
|
||
console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
|
||
}
|
||
} else if(target == "dfn-panel") {
|
||
// Switch it to "activated" state, which pins it.
|
||
el.classList.add("activated");
|
||
el.style.left = null;
|
||
el.style.top = null;
|
||
}
|
||
|
||
});
|
||
</script> |