wpt / css / css-grid / alignment / grid-content-alignment-and-self-alignment-001.html

Status: PASS | Duration: 8ms | Subtests: 24/24 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (24/24)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
.grid 1PASS
.grid 2PASS
.grid 3PASS
.grid 4PASS
.grid 5PASS
.grid 6PASS
.grid 7PASS
.grid 8PASS
.grid 9PASS
.grid 10PASS
.grid 11PASS
.grid 12PASS
.grid 13PASS
.grid 14PASS
.grid 15PASS
.grid 16PASS
.grid 17PASS
.grid 18PASS
.grid 19PASS
.grid 20PASS
.grid 21PASS
.grid 22PASS
.grid 23PASS
.grid 24PASS

/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html

<!DOCTYPE html>
<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
<link rel="stylesheet" href="/fonts/ahem.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" href="/css/support/grid.css">
<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items in just one cell." />

<style>
.grid {
  grid-template-columns: 200px 100px;
  grid-template-rows: 100px 50px;
  width: 500px;
  height: 350px;
  position: relative;
  font: 10px/1 Ahem;
}

.gridGaps {
  grid-gap: 10px 20px;
}
</style>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script type="text/javascript">
  setup({ explicit_done: true });
</script>

<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">

<div id="log"></div>

<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
<div class="grid contentSpaceBetween itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
<div class="grid contentSpaceBetween itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
<div class="grid contentSpaceAround itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
<div class="grid contentSpaceAround itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid contentSpaceEvenly itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid contentSpaceEvenly itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceBetween itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceBetween itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceAround itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceAround itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid gridGaps contentSpaceEvenly itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid gridGaps contentSpaceEvenly itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
</div>

<!-- RTL direction. -->

<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceBetween itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceBetween itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceAround itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceAround itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid directionRTL contentSpaceEvenly itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid directionRTL contentSpaceEvenly itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
</div>

<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
  <!-- Dummy DIVs to help checking the result visually. -->
  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>

  <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
  <div class="firstRowSecondColumn" data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
  <div class="secondRowSecondColumn" data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
</div>

</body>