跳至主要內容

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>
上次编辑于: