Hotodogo | Snippets: Grid Cheatsheet

* {
    font-size: 14px;
}
html { background: #fff; }
body {
    padding: 30px;
}
table {
    width: 100%;
}

table,
td,
th {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid;
}

td,
th {
    padding: 5px;
}

CSS Before Head

HTML Head

CSS After Head

JS Before HTML Body

<center><h4 id="_grid">Grid</h4></center>
<style type="text/css">
    .grid-container {
        width: 50px;
        height: 50px;
        border: 1px solid #1482E8;
        padding: 1px;
        margin: 0 auto;
    }
    .grid-container div {

    }
    .grid-container div:nth-child(1) {
        background: #F0811A;
    }
    .grid-container div:nth-child(2) {
        background: #ffd43b;
    }
    .grid-container div:nth-child(3) {
        background: #878EA7;
    }
    .grid-container div:nth-child(4) {
        background: #2DDE1B;
    }
    .grid-container div:nth-child(5) {
        background: #F372DF;
    }
    .grid-container div:nth-child(6) {
        background: #F0331A;
    }
    .grid-container div:nth-child(7) {
        background: #F0A98A;
    }
    .grid-container div:nth-child(8) {
        background: #3FA98A;
    }
    .grid-container div:nth-child(9) {
        background: #3F01B0;
    }
</style>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">子元素</caption>
<colgroup>
<col style="width: 20%;">
<col style="width: 60%;">
<col style="width: 20%;">
</colgroup>
<tbody>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="3"><div class="content"><div class="paragraph">
<p><code>display</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>为子级建立新的网格格式化上下文。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">display</span><span class="tok-o">:</span> <span class="tok-nt">grid</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-01 .grid-container {
        display: grid;
    }
    .grid-01 .grid-container div {

    }
</style>
<div class="grid-01">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">display</span><span class="tok-o">:</span> <span class="tok-nt">inline-grid</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-02 .grid-container {
        display: inline-grid;
    }
    .grid-02 .grid-container div {

    }
</style>
<div class="grid-02">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="5"><div class="content"><div class="paragraph">
<p><code>grid-template</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>定义网格的行和列。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-template-columns</span><span class="tok-o">:</span> <span class="tok-nt">12px</span> <span class="tok-nt">12px</span> <span class="tok-nt">12px</span><span class="tok-o">;</span>
<span class="tok-nt">grid-template-rows</span><span class="tok-o">:</span> <span class="tok-nt">12px</span> <span class="tok-nt">12px</span> <span class="tok-nt">12px</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-03 .grid-container {
        display: grid;
        grid-template-columns: 12px 12px 12px;
        grid-template-rows: 12px 12px 12px;
    }
    .grid-03 .grid-container div {

    }
</style>
<div class="grid-03">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-template-columns</span><span class="tok-o">:</span> <span class="tok-nt">repeat</span><span class="tok-o">(</span><span class="tok-nt">3</span><span class="tok-o">,</span> <span class="tok-nt">12px</span><span class="tok-o">);</span>
<span class="tok-nt">grid-template-rows</span><span class="tok-o">:</span> <span class="tok-nt">repeat</span><span class="tok-o">(</span><span class="tok-nt">3</span><span class="tok-o">,</span> <span class="tok-nt">auto</span><span class="tok-o">);</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-04 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 12px);
        grid-template-rows: repeat(3, auto);
    }
    .grid-04 .grid-container div {

    }
</style>
<div class="grid-04">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-template-columns</span><span class="tok-o">:</span> <span class="tok-nt">8px</span> <span class="tok-nt">auto</span> <span class="tok-nt">8px</span><span class="tok-o">;</span>
<span class="tok-nt">grid-template-rows</span><span class="tok-o">:</span> <span class="tok-nt">8px</span> <span class="tok-nt">auto</span> <span class="tok-nt">12px</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-05 .grid-container {
        display: grid;
        grid-template-columns: 8px auto 8px;
        grid-template-rows: 8px auto 12px;
    }
    .grid-05 .grid-container div {

    }
</style>
<div class="grid-05">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-template-columns</span><span class="tok-o">:</span> <span class="tok-nt">22</span><span class="tok-o">%</span> <span class="tok-nt">22</span><span class="tok-o">%</span> <span class="tok-nt">auto</span><span class="tok-o">;</span>
<span class="tok-nt">grid-template-rows</span><span class="tok-o">:</span> <span class="tok-nt">22</span><span class="tok-o">%</span> <span class="tok-nt">auto</span> <span class="tok-nt">22</span><span class="tok-o">%;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-06 .grid-container {
        display: grid;
        grid-template-columns: 22% 22% auto;
        grid-template-rows: 22% auto 22%;
    }
    .grid-06 .grid-container div {

    }
</style>
<div class="grid-06">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="4"><div class="content"><div class="paragraph">
<p><code>grid-gap</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>指定列和行间距的大小。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-row-gap</span><span class="tok-o">:</span> <span class="tok-nt">1px</span><span class="tok-o">;</span>
<span class="tok-nt">grid-column-gap</span><span class="tok-o">:</span> <span class="tok-nt">9px</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-07 .grid-container {
        display: grid;
        grid-row-gap: 1px;
        grid-column-gap: 9px;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
    }
    .grid-07 .grid-container div {

    }
</style>
<div class="grid-07">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-gap</span><span class="tok-o">:</span> <span class="tok-nt">1px</span> <span class="tok-nt">9px</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-08 .grid-container {
        display: grid;
        grid-gap: 1px 9px;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
    }
    .grid-08 .grid-container div {

    }
</style>
<div class="grid-08">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-gap</span><span class="tok-o">:</span> <span class="tok-nt">6px</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-09 .grid-container {
        display: grid;
        grid-gap: 6px;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
    }
    .grid-09 .grid-container div {

    }
</style>
<div class="grid-09">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="5"><div class="content"><div class="paragraph">
<p><code>justify-items</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>沿行轴对齐网格项中的内容。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-items</span><span class="tok-o">:</span> <span class="tok-nt">start</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-10 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        justify-items: start;
    }
    .grid-10 .grid-container div {
        min-width: 4px;
    }
</style>
<div class="grid-10">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-items</span><span class="tok-o">:</span> <span class="tok-nt">end</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-11 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        justify-items: end;
    }
    .grid-11 .grid-container div {
        min-width: 4px;
    }
</style>
<div class="grid-11">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-items</span><span class="tok-o">:</span> <span class="tok-nt">center</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-12 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        justify-items: center;
    }
    .grid-12 .grid-container div {
        min-width: 4px;
    }
</style>
<div class="grid-12">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-c">/* 默认 */</span>
<span class="tok-nt">justify-items</span><span class="tok-o">:</span> <span class="tok-nt">stretch</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-13 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        justify-items: stretch;
    }
    .grid-13 .grid-container div {
        min-width: 4px;
    }
</style>
<div class="grid-13">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="5"><div class="content"><div class="paragraph">
<p><code>align-items</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>沿列轴对齐网格项目中的内容。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">start</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-14 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        align-items: start;
    }
    .grid-14 .grid-container div {
        min-height: 4px;
    }
</style>
<div class="grid-14">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">end</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-15 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        align-items: end;
    }
    .grid-15 .grid-container div {
        min-height: 4px;
    }
</style>
<div class="grid-15">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">center</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-16 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        align-items: center;
    }
    .grid-16 .grid-container div {
        min-height: 4px;
    }
</style>
<div class="grid-16">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-c">/* 默认 */</span>
<span class="tok-nt">align-items</span><span class="tok-o">:</span> <span class="tok-nt">stretch</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-17 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        align-items: stretch;
    }
    .grid-17 .grid-container div {
        min-height: 4px;
    }
</style>
<div class="grid-17">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="8"><div class="content"><div class="paragraph">
<p><code>justify-content</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>当总网格大小小于容器时，对齐行轴上的所有网格内容。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">start</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-18 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        justify-content: start;
    }
    .grid-18 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-18">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">end</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-19 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        justify-content: end;
    }
    .grid-19 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-19">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">center</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-20 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        justify-content: center;
    }
    .grid-20 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-20">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">stretch</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-21 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        justify-content: stretch;
    }
    .grid-21 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-21">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">space-around</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-22 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        justify-content: space-around;
    }
    .grid-22 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-22">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">space-between</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-23 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        justify-content: space-between;
    }
    .grid-23 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-23">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">justify-content</span><span class="tok-o">:</span> <span class="tok-nt">space-evenly</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-24 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        justify-content: space-evenly;
    }
    .grid-24 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-24">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="8"><div class="content"><div class="paragraph">
<p><code>align-content</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>当总网格大小小于容器时，对齐列轴上的所有网格内容。</p>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">start</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-25 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        align-content: start;
    }
    .grid-25 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-25">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">end</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-26 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        align-content: end;
    }
    .grid-26 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-26">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">center</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-27 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        align-content: center;
    }
    .grid-27 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-27">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">stretch</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-28 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        align-content: stretch;
    }
    .grid-28 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-28">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">space-around</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-29 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        align-content: space-around;
    }
    .grid-29 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-29">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">space-between</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-30 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        align-content: space-between;
    }
    .grid-30 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-30">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">align-content</span><span class="tok-o">:</span> <span class="tok-nt">space-evenly</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-31 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 8px);
        grid-template-rows: repeat(3, 8px);
        align-content: space-evenly;
    }
    .grid-31 .grid-container div {
        min-width: 4px;
        min-height: 4px;
    }
</style>
<div class="grid-31">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle" rowspan="4"><div class="content"><div class="paragraph">
<p><code>grid-auto-flow</code></p>
</div></div></td>
<td class="tableblock halign-left valign-middle" colspan="2"><div class="content"><div class="paragraph">
<p>自动放置未明确放置的网格项目的算法。</p>
</div>
<style type="text/css">
    @keyframes child-fade-in {
        0% {
            opacity: 0;
        }

        10% {
            opacity: 0;
        }

        20% {
            opacity: 1
        }

        60% {
            opacity: 1
        }

        80% {
            opacity: 0
        }

        100% {
            opacity: 0
        }
    }

    .grid-32 .grid-container div,
    .grid-33 .grid-container div,
    .grid-34 .grid-container div {
        animation-name: child-fade-in;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    }

    @media print {
        .grid-32 .grid-container div,
        .grid-33 .grid-container div,
        .grid-34 .grid-container div {
            animation: none;
            animation-delay: 0;
        }
    }

    .grid-32 .grid-container div:nth-child(1),
    .grid-33 .grid-container div:nth-child(1),
    .grid-34 .grid-container div:nth-child(1) {
        animation-delay: 0.4s
    }

    .grid-32 .grid-container div:nth-child(2),
    .grid-33 .grid-container div:nth-child(2),
    .grid-34 .grid-container div:nth-child(2) {
        animation-delay: 0.8s
    }

    .grid-32 .grid-container div:nth-child(3),
    .grid-33 .grid-container div:nth-child(3),
    .grid-34 .grid-container div:nth-child(3) {
        animation-delay: 1.2s
    }

    .grid-32 .grid-container div:nth-child(4),
    .grid-33 .grid-container div:nth-child(4),
    .grid-34 .grid-container div:nth-child(4) {
        animation-delay: 1.6s
    }

    .grid-32 .grid-container div:nth-child(5),
    .grid-33 .grid-container div:nth-child(5),
    .grid-34 .grid-container div:nth-child(5) {
        animation-delay: 2s
    }

    .grid-32 .grid-container div:nth-child(6),
    .grid-33 .grid-container div:nth-child(6),
    .grid-34 .grid-container div:nth-child(6) {
        animation-delay: 2.4s
    }

    .grid-32 .grid-container div:nth-child(7),
    .grid-33 .grid-container div:nth-child(7),
    .grid-34 .grid-container div:nth-child(7) {
        animation-delay: 2.8s
    }

    .grid-32 .grid-container div:nth-child(8),
    .grid-33 .grid-container div:nth-child(8),
    .grid-34 .grid-container div:nth-child(8) {
        animation-delay: 3.2s
    }

    .grid-32 .grid-container div:nth-child(9),
    .grid-33 .grid-container div:nth-child(9),
    .grid-34 .grid-container div:nth-child(9) {
        animation-delay: 3.6s
    }
</style></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-auto-flow</span><span class="tok-o">:</span> <span class="tok-nt">row</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-32 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: row;
    }
    .grid-32 .grid-container div {

    }
</style>
<div class="grid-32">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-auto-flow</span><span class="tok-o">:</span> <span class="tok-nt">column</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-33 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
    }
    .grid-33 .grid-container div {

    }
</style>
<div class="grid-33">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-middle"><div class="content"><div class="listingblock">
<div class="content">
<pre class="pygments highlight"><code data-lang="css"><span></span><span class="tok-nt">grid-auto-flow</span><span class="tok-o">:</span> <span class="tok-nt">dense</span><span class="tok-o">;</span></code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-middle"><div class="content"><style type="text/css">
    .grid-34 .grid-container {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: dense;
    }
    .grid-34 .grid-container div {

    }
</style>
<div class="grid-34">
    <div class="grid-container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div></div></td>
</tr>
</tbody>
</table>

HTML Body

HTML Foot

JS After HTML Body