Grid 布局
约 1597 字
Grid 布局
justify-content
justify-content: start
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="justify-content: start">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>justify-content: end
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="justify-content: end">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>justify-content: center
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="justify-content: center">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>justify-content: stretch
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="justify-content: stretch;grid-template-columns: 50px auto 50px">
<div class="grid-item" style="background-color: lightblue;">1</div>
<div class="grid-item" style="background-color: lightgreen;width: auto">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow;width: auto">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue;width: auto">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>justify-content: space-around
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="justify-content: space-around">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>justify-content: space-between
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="justify-content: space-between">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>justify-content: space-evenly
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="justify-content: space-evenly">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>align-content
align-content: start
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="align-content: start">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>align-content: end
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="align-content: end">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>align-content: center
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="align-content: center">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>align-content: stretch
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="align-content: stretch;grid-template-rows: 50px auto 50px;">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan;height: auto;">4</div>
<div class="grid-item" style="background-color: snow;height: auto;">5</div>
<div class="grid-item" style="background-color: lightsalmon;height: auto;">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>align-content: space-around
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="align-content: space-around">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>align-content: space-between
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="align-content: space-between">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>align-content: space-evenly
<link rel="stylesheet" href="/assets/styles/grid-layout.css">
<div class="grid-container" style="align-content: space-evenly">
<div class="grid-item" style="background-color: lightblue">1</div>
<div class="grid-item" style="background-color: lightgreen">2</div>
<div class="grid-item" style="background-color: lightyellow">3</div>
<div class="grid-item" style="background-color: lightcyan">4</div>
<div class="grid-item" style="background-color: snow">5</div>
<div class="grid-item" style="background-color: lightsalmon">6</div>
<div class="grid-item" style="background-color: silver">7</div>
<div class="grid-item" style="background-color: lightskyblue">8</div>
<div class="grid-item" style="background-color: lavender">9</div>
</div>