serenity/Base/res/html/misc/display-grid.html

<style>
  .grid-container {
    display: grid;
    background-color: lightsalmon;
  }
  .grid-item {
    background-color: lightblue;
  }
</style>

<!-- A basic grid -->
<p>Should render a 2x2 grid</p>
<div 
  class="grid-container"
  style="grid-template-columns: auto auto;">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
</div>

<!-- Different row heights -->
<p>Should render a 2x2 grid with the first row having a height of 50px</p>
<div 
  class="grid-container"
  style="grid-template-columns: auto auto;">
  <div class="grid-item" style="height: 50px;">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
</div>

<p>Start of crash tests</p>
<!-- Check for a bug where a github page was crashing due to the following code. -->
<div 
  class="grid-container"
  style="
    --Layout-sidebar-width:296px;
    grid-template-columns: minmax(0, var(--Layout-sidebar-width));">
  <div class="grid-item">1</div>
</div>

<!-- Spans causing positions outside the inherit grid. (span 2 with an end position of 1 causes the start to be -1) -->
<div class="grid-container">
  <div class="grid-item" style="grid-row: span 2 / 1; grid-column: span 2 / 1;">1</div>
  <div class="grid-item" style="grid-row: span 2 / 1;">2</div>
  <div class="grid-item" style="grid-column: span 2 / 1;">3</div>
  <div class="grid-item" style="grid-column-end: 1; grid-row-end: 1;">6</div>
</div>

<!-- 0 positioned grid items and similar inputs -->
<div class="grid-container" style="grid-template-rows: repeat(4,[row-start] 1fr [row-end]);">
  <div class="grid-item" style="grid-row-end: 0;">2</div>
  <div class="grid-item" style="grid-row: 0 / 0;">3</div>
  <div class="grid-item" style="grid-column: 0 / 1;">4</div>
  <div class="grid-item" style="grid-row: 1 / 0;">5</div>
  <div class="grid-item" style="grid-row-end: 1;">1</div>
  <div class="grid-item" style="grid-column-end: 1;">6</div>
</div>

<!-- Grid-column-span larger than implicit grid for row-positioned items -->
<div class="grid-container">
  <div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
</div>
<!-- Grid-column-span larger than implicit grid for non-positioned items -->
<div class="grid-container">
  <div class="grid-item" style="grid-column: span 4;">1</div>
</div>
<!-- Grid-row-span larger than implicit grid for column-positioned items -->
<div class="grid-container">
  <div class="grid-item" style="grid-column: 1 / -1; grid-row: span 4;">1</div>
</div>
<!-- Grid-row-span larger than implicit grid for non-positioned items -->
<div class="grid-container">
  <div class="grid-item" style="grid-row: span 4;">1</div>
</div>
<!-- Minmax parsing with calc (Another crash found thanks to Github)-->
<div 
  class="grid-container"
  style="grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));">
</div>

<!-- Invalid template columns definition. Fixme: There seems to be some handling of this in other browsers
that I don't quite understand. -->
<div 
  class="grid-container"
  style="
    grid-template-columns: [name1] [name1] [name2] 50px;
  ">
  <div class="grid-item" style="grid-column-start: name1;">1</div>
</div>

<!-- Missing grid track between line name declarations -->
<div 
  class="grid-container"
  style="
    grid-template-rows: [name1] 50px [name2] [name3];
  ">
  <div class="grid-item" style="grid-row-start: name2;">1</div>
</div>

<!-- Missing grid track between line name declarations -->
<div 
  class="grid-container"
  style="
    grid-template-rows: [name1] 1fr [name2];
  ">
  <div class="grid-item" style="grid-row: notfound;">1</div>
</div>

<!-- Percentage gap in vertical orientation (Not yet implemented) -->
<div 
  class="grid-container"
  style="
    grid-template-columns: auto auto;
    gap: calc(4% + 2px);
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
</div>

<!-- Grid gap and auto-fit -->
<div 
  class="grid-container"
  style="
    grid-column-gap: 1px;
    grid-template-columns: repeat(auto-fit, 48px);
  ">
  <div class="grid-item">1</div>
</div>
  
<div 
  class="grid-container"
  style="
    grid-column-gap: 1px;
    grid-template-columns: [name1 name2 name3] 1fr repeat(1, [name4 name5 name6] 1fr);
  ">
  <div class="grid-item">1</div>
</div>

<!-- Row-gaps with overflowing row spans. Github bug-->
<div 
    class="grid-container"
    style="
        grid-row-gap: 16px;
        grid-template-rows: 1fr 1fr;
    ">
    <div class="grid-item" style="grid-row: 2 / span 3;">1</div>
</div>

<div style="
        display: grid;
        grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto
    ">
    <div style="grid-column: 2/span 2;"></div>
</div>

<p>End of crash tests</p>

<!-- Different column sizes -->
<p>Should render a 2x2 grid with columns 50px and 50%</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: 50px 50%; 
    grid-template-rows: auto auto;">
  <div class="grid-item"
    style="
    grid-column: 1 / 1;
    grid-row: 1 / 1">1</div>
  <div class="grid-item"
    style="
    grid-column: 2 / 2;
    grid-row: 1 / 1">2</div>
  <div class="grid-item"
    style="
    grid-column: 1 / 1;
    grid-row: 2 / 2">3</div>  
  <div class="grid-item"
    style="
    grid-column: 2 / 2;
    grid-row: 2 / 2">4</div>
</div>

<!-- Using grid-row and grid-column -->
<p>Should render a full-width 4x4 grid with:
<ul>
  <li>one large column on the left</li>
  <li>one large column on the right, being split in half vertically, with the number 2 in the top half, and numbers 3, 4, 5, and 6 in the bottom</li>
</ul>
<div
  class="grid-container"
  style="
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 25px 25px 25px 25px );
  ">
  <div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
  <div class="grid-item" style="grid-row: 1 / 5; grid-column: 5 / -1;">2</div>
  <div class="grid-item" style="grid-column: span 2; grid-row: span 2;">3</div>
  <div class="grid-item" style="grid-column: span 2 / -1; grid-row: span 2;">4</div>
  <div class="grid-item" style="grid-column: span 2; grid-row: 7 / span 100;">5</div>
  <div class="grid-item" style="grid-column: 7 / span 2; grid-row: span 2 / -1;">6</div>
</div>

<!-- Invalid minmax value as can't have a flexible length as a minimum value -->
<p>Should render 2 items with no grid formatting (one on top of the other)
<div 
  class="grid-container"
  style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value -->
<p>Should render 2 items with no grid formatting (one on top of the other)
<div 
  class="grid-container"
  style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

<!-- Basic minmax -->
<p>Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space, 
they will expand up to 300px each.</p>
<div 
  class="grid-container"
  style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

<!-- Basic minmax vertical-->
<p>Since there is no vertical limit, the two rows should be 50px high each.</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
    grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

<!-- Basic minmax vertical-->
<p>Since there is a height limit, the rows should be 25px high each.</p>
<div 
  class="grid-container"
  style="
    height: 50px;
    grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
    grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">2</div>
  <div class="grid-item">2</div>
</div>

<!-- Minmax horizontal with maximum as flex-->
<p>3 columns with minimum 200px and maximum 100%.</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

<!-- Auto-fill-->
<p>Auto-fill of minimum 250px, max 1fr</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

<!-- Auto-fit-->
<p>Auto-fit of minimum 250px, max 1fr</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

<!-- See point 12.5.1, differences between minmax sizes. For example as a max it's comparing 2 flexes with a 
length value, and as a minimum two lengths with an auto. -->
<p>Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum</p>
<div 
  class="grid-container"
  style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
  <div class="grid-item">1</div>
  <div class="grid-item">Article content</div>
  <div class="grid-item">3</div>
</div>

<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
<p>Named tracks there should be 4 grid items in a circle with a space in the middle</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
    grid-template-rows: [main-start] 25px [content-start] 25px [content-end] 25px [main-end];
  ">
  <div
    class="grid-item"
    style="
      grid-column-start: main-start;
      grid-row-start: main-start;
      grid-row-end: main-end;
    ">1</div>
  <div
    class="grid-item"
    style="
      grid-column-start: content-end;
      grid-row-start: main-start;
      grid-row-end: content-end;
    ">2</div>
  <div
    class="grid-item"
    style="
      grid-column-start: content-start;
      grid-row-start: main-start;
    ">3</div>
  <div
    class="grid-item"
    style="
      grid-column-start: content-start;
      grid-column-end: main-end;
      grid-row-start: content-end;
    ">4</div>
</div>

<p>Should render a 2 columned grid</p>
<div 
  class="grid-container"
  style="
    grid-template-columns:
    [a]     auto
    [b]     auto;
  "
  >
  <div class="grid-item" style="grid-column-start: a;">1</div>
  <div class="grid-item" style="grid-column-start: b;">2</div>
</div>

<!-- Multiple repeats -->
<p>Should render 2 50px columns and 2 100px columns</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: repeat(2, 50px) repeat(2, 100px)
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

<!-- Named lines inside repeat -->
<p>Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: repeat(2, [name1] 50px [name2] 100px);
  ">
    <div class="grid-item" style="grid-column-start: name2;">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

<!-- Sizing of children of grid -->
<p>Should render a 64px wide image</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: auto 0 minmax(0, 100%);
  ">
  <div class="wrapper" style="width: 100%;">
    <img style="width: 100%;" src="data:image/jpeg;base64,
      /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
      r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
      ////////////////////////////////////////////////////////////wAARCAAYAEADAREA
      AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
      AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
      AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
      MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
      X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
      JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=">
  </div>
</div>

<!-- Gap basics -->
<p>There should be a large (50px) column gap and small (10px) row gap</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: auto auto;
    gap: 10px 50px;
  ">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
</div>

<!-- Gap basics -->
<p>There should be a Z-shaped gap (with both vertical and horizontal gap)</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: auto auto;
    gap: calc(1vh + 10px) calc(10% - 10px);
  ">
  <div class="grid-item" style="grid-column: 2 / span 1">1</div>
  <div class="grid-item">2</div>
</div>

<!-- Column end and span -->
<p>There should be a column spanning 8 units, and then one spanning 4</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: repeat(12,minmax(0,5fr));
  ">
  <div class="grid-item"
  style="
    grid-column-end: span 8;
  ">1</div>
  <div class="grid-item"
  style="
    grid-column-end: span 4;
  ">2</div>
</div>

<!-- Column start span takes priority over column end span -->
<p>There should be a column spanning 4 units, and then one spanning 8</p>
<div 
  class="grid-container"
  style="
    grid-template-columns: repeat(12,minmax(0,5fr));
  ">
  <div class="grid-item"
  style="
    grid-column-start: span 4;
    grid-column-end: span 8;
  ">1</div>
  <div class="grid-item"
  style="
    grid-column-start: span 8;
    grid-column-end: span 4;
  ">2</div>
</div>

<!-- Row end and span -->
<p>There should be a row spanning 2 units, and then one spanning 3</p>
<div 
  class="grid-container"
  style="
    grid-template-rows: repeat(5, 20px);
  ">
  <div class="grid-item"
  style="
    grid-row-end: span 2;
  ">1</div>
  <div class="grid-item"
  style="
    grid-row-end: span 3;
  ">2</div>
</div>

<!-- Column-gaps with overflowing column spans -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<div 
    class="grid-container"
    style="
        grid-column-gap: 16px;
        grid-template-columns: 1fr 1fr;
    ">
    <div class="grid-item" style="grid-column: 2 / span 5;">1</div>
</div>

<!-- Column-gaps with overflowing column spans and row spans -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<div 
    class="grid-container"
    style="
        grid-column-gap: 16px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 20px;
    ">
    <div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
</div>

<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
<p>The bottom row should take up half the width of the grid.</p>
<div 
    class="grid-container"
    style="
        grid-template-columns: 1fr 1fr;
    ">
    <div class="grid-item" style="
        grid-column: 1 / span 3;
        grid-row: 1;
    ">1</div>
    <div class="grid-item">1</div>
</div>

<p>Grid template areas basics</p>
<div
  class="grid-container"
  style="
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'left right-top'
      'left right-bottom';
  ">
  <div style="background-color: lightpink; grid-area: right-bottom / right-bottom / right-bottom / right-bottom;">right-bottom</div>
  <div style="background-color: lightgreen; grid-area: left;">left</div>
  <div style="background-color: lightgrey; grid-column-end: right-top;">right-top</div>
</div>

<!-- Grid-lines vs. Grid template areas -->
<p>There should be a left-aligned column taking up 1 / 3 of the grid</p>
<div
class="grid-container"
  style="
    grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
    grid-template-areas: 'a b c';
    ">
  <div class="grid-item" style="grid-column-start: a; grid-column-end: a;">1fr</div>
</div>

<!-- Valid grid areas -->
<p>Column taking up 50% width</p>
<div
class="grid-container"
  style="
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 'one one three two' 'one one four two' 'one one four two';
    ">
  <div class="grid-item" style="grid-column-start: one; grid-column-end: one;">1fr</div>
</div>

<!-- Valid grid areas. This test should ideally fail differently FIXME -->
<p>Left-aligned column taking up 25% width</p>
<div
class="grid-container"
  style="
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 'one one three two' 'one one four one';
    ">
  <div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
</div>

<!-- Valid grid areas. This test should ideally fail differently FIXME -->
<p>Left-aligned column taking up 25% width</p>
<div
class="grid-container"
  style="
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 'one one three two' 'one one four five' 'one one four two';
    ">
  <div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
</div>

<p>Min-content / Max-content / 1fr column widths</p>
<div
class="grid-container"
  style="
    grid-template-columns: min-content max-content 1fr;
    grid-template-areas: 'one two three';
    ">
  <div class="grid-item" style="grid-area: one; min-width: 25%; max-width: 50%;">min-content</div>
  <div class="grid-item" style="grid-area: two;">max-content</div>
  <div class="grid-item" style="grid-area: three;">1fr</div>
</div>