検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでのグリッド属性の使い方の紹介（コード）

CSSでのグリッド属性の使い方の紹介（コード）

不言
不言転載
2018-10-17 15:47:082626ブラウズ

この記事では、CSS での Grid 属性の使用法 (コード) を紹介します。必要な方は参考にしていただければ幸いです。

グリッド レイアウト

親要素に追加された属性

grid-template-columns/grid-template-rows

  • #要素の行または列の幅と高さを定義します

    • ##親要素が 9 等分の部分に分割されている場合、その方法は関係ありません。多くの子要素が存在します。要素は 9 等分に表示されます。

    • grid-template-columns: 33% 33% 33%; と書くことができます。 33%);

  • .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container1 {
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 33% 33% 33%;
}
    <div>
  <div></div>
  <div></div>
</div>

CSSでのグリッド属性の使い方の紹介（コード）

グリッド テンプレート エリア

#親要素のグリッド テンプレート エリアは、子要素のグリッド エリアと連携してグリッド エリアを定義します

  • ##ピリオドは空のグリッドを表しますユニット

  • #
    .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "header header . footer"
    "main main . sidebar"
    "main main . sidebar";
}

.container2 .item-1 {
  grid-area: header;
}

.container2 .item-2 {
  grid-area: main;
}

.container2 .item-3 {
  grid-area: sidebar;
}

.container2 .item-4 {
  grid-area: footer;
}
    <div>
  <div>header</div>
  <div>main</div>
  <div>sidebar</div>
  <div>footer</div>
</div>

##グリッド-列-ギャップ/グリッド-行-ギャップ/グリップ-ギャップCSSでのグリッド属性の使い方の紹介（コード）

グリッド線のサイズを指します。グリッド項目間の間隔とも言えます。

    .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container3 {
  grid-template-columns: repeat(3, 30%);
  grid-template-rows: repeat(3, 30%);
  grid-column-gap: 2%;
  grid-row-gap: 2%;
}
    <div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

    • justify -items/align-itemsCSSでのグリッド属性の使い方の紹介（コード）

    justify-items子要素の内容を垂直列軸に揃える

    • align-itemsAlign 子要素の内容は水平行軸に揃えられます

    • 両方の属性には 4 つの値があります

    • 私の例では、比較しやすいように、ネストされたグリッド

    .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container4 {
  width: 400px;
  height: 200px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
}
.container4 .item {
  display: grid;
}
.container4 .item p {
  background-color: coral;
  border: 1px dashed #aaa
}
.container4 .item-1 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: start;
}
.container4 .item-2 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: end;
}
.container4 .item-3 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: center;
}
.container4 .item-4 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: stretch;
}
.container4 .item-5 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: start;
}
.container4 .item-6 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: end;
}
.container4 .item-7 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: center;
}
.container4 .item-8 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: stretch;
}
    <div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
<li><p></p></li>
<p style="text-align: center;">##justify-content /align-content<span class="img-wrap"><img src="https://img.php.cn//upload/image/595/108/774/1539762039887932.png" title="1539762039887932.png" alt="CSSでのグリッド属性の使い方の紹介（コード）"> </span></p>
<p>子要素の配置を設定します。justify は垂直を意味し、align は水平を意味します <strong></strong></p>
<pre class="brush:php;toolbar:false">.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container5 {
  width: 700px;
  height: 200px;
  grid-template-columns: repeat(7, 14%);
  grid-template-rows: repeat(2, 50%);
}

.container5 .item {
  display: grid;
}

.container5 .item p {
  background-color: coral;
  border: 1px dashed #aaa
}

.container5 .item-1 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: start;
}

.container5 .item-2 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: end;
}

.container5 .item-3 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: center;
}

.container5 .item-4 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: stretch;
}

.container5 .item-5 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-around;
}

.container5 .item-6 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-between;
}

.container5 .item-7 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-evenly;
}

.container5 .item-8 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: start;
}

.container5 .item-9 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: end;
}

.container5 .item-10 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: center;
}

.container5 .item-11 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: stretch;
}

.container5 .item-12 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-around;
}

.container5 .item-13 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-between;
}

.container5 .item-14 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-evenly;
}
    rrree

    grid-auto-columns/grid-auto-rowsCSSでのグリッド属性の使い方の紹介（コード）

    grid-columns の後の値が1 / 2 の形式で、列 1 から開始することを意味します。グリッド線は列 2 のグリッド線で始まり、列 2 のグリッド線で終わります。この属性で定義されたグリッドが親要素の範囲を超える場合、暗黙的なグリッドが自動的に生成されます

      grid-auto -columns および Grid-auto-rows の 2 つのプロパティは、これらの暗黙的なグリッド トラックの幅を指定します

    • <div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
  <div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
    <div>list</div>
  </div>
</div>
      .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container6 {
  width: 120px;
  height: 180px;
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
  grid-auto-columns: 60px;
}
.container6 .item-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  border: 1px solid #ccc;
}
.container6 .item-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
  border: 1px solid #ccc;
}

    CSSでのグリッド属性の使い方の紹介（コード）

    ##グリッド自動フロー

    CSSでのグリッド属性の使い方の紹介（コード）

    グリッド要素がない場合、自動配置

    行は左から右への配置、列は上から下への配置を意味します

    • <div>
  <div>1/2&2/3</div>
  <div>5/6&2/3</div>
</div>
      .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container7 {
  display: grid;
  width: 200px;
  height: 40px;
  grid-template-columns: 40px 40px 40px 40px 40px;
  grid-template-rows: 40px 40px;
  /* grid-auto-flow: row; */
  grid-auto-flow: column;
}
.container7 .item-1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.container7 .item-5 {
  grid-column: 5;
  grid-row: 1 / 3;
}

    CSSでのグリッド属性の使い方の紹介（コード）

    ##子要素に追加された属性CSSでのグリッド属性の使い方の紹介（コード） グリッド列開始/グリッド列終了/グリッド行開始/グリッド行終了/グリッド列/グリッド行

    定義 グリッドの開始位置または終了位置

    は、この行から開始することを示す数値です。値はスパンに数字を加えたもので、この行の位置がカバーされていることを示します 

    • <div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
      .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container8 {
  margin-top: 20px;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(5, 20%);
}
.container8 .item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.container8 .item-2 {
  grid-column-start: 4;
  grid-column-end: span 5;
  grid-row-start: 2;
  grid-row-end: span 5;
}
.container8 .item-3 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 4;
}

    • CSSでのグリッド属性の使い方の紹介（コード）

      justify-self/align-self

      • 网格子项内容与格线对齐

      .container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container9 {
  width: 400px;
  height: 200px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
}
.container9 .item-1 {
  justify-self: start;
}
.container9 .item-2 {
  justify-self: end;
}
.container9 .item-3 {
  justify-self: center;
}
.container9 .item-4 {
  justify-self: stretch;
}
.container9 .item-5 {
  align-self: start;
}
.container9 .item-6 {
  align-self: end;
}
.container9 .item-7 {
  align-self: center;
}
.container9 .item-8 {
  align-self: stretch;
}
      <div>
  <div>item-1</div>
  <div>item-2</div>
  <div>item-3</div>
  <div>item-4</div>
  <div>item-5</div>
  <div>item-6</div>
  <div>item-7</div>
  <div>item-8</div>
</div>

      CSSでのグリッド属性の使い方の紹介（コード）

      CSSでのグリッド属性の使い方の紹介（コード）


    以上がCSSでのグリッド属性の使い方の紹介（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    css auto column
    声明：
    この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
    前の記事：Vue データの動的追加と動的バインディングのアイデア (画像とテキスト)次の記事：Vue データの動的追加と動的バインディングのアイデア (画像とテキスト)

    関連記事

    続きを見る