CSSでグリッド線のサイズを定義する方法-フロントエンドQ&A-php.cn

CSSでグリッド線のサイズを定義する方法

醉折花枝作酒筹

リリース： 2021-08-13 16:16:35

オリジナル

3234 人が閲覧しました

CSSの背景についての知識はほぼ習得できたので、次はグリッドシステムの知識を見ていきましょう。困っている友達は参考にしてください。

まず小さな栗を見てみましょう。

 <style>
      article {
          display: grid;
          width: 300px;
          height: 300px;
          grid-template-rows: repeat(3,1fr);
          grid-template-columns: repeat(3,1fr);
      }
      div{
          background: rgb(208, 159, 255);
          background-clip: content-box;
          border: solid 1px rgb(208, 159, 255);
          padding: 10px;
      }
    </style>
  </head>
  <body>
    <article>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </article>
  </body>

ログイン後にコピー

この小さな例の結果は次のとおりです

CSSでグリッド線のサイズを定義する方法ご覧のとおり、属性の値を変更することで、元々は非常に美しいレイアウトが、特に美しくないレイアウトに変更されました。美しいですね、レイアウト。それでは、どのような属性を変更したのでしょうか?観察すると、grid-template-rows と grid-template-columns の属性値が変更されていることがわかります。

これら 2 つの属性を見てみましょう。

grid-template-columns プロパティは、グリッド列の寸法に基づいて、グリッドラインの名前とグリッドトラックのサイズを定義します。値はスペースで区切られたリストであり、各値は対応する列のサイズを指定します。

構文形式は

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

ログイン後にコピー

です。これは、この属性値の詳細な説明です。

none: このキーワードはあいまいなメッシュを表します。すべての行とそのサイズは、grid-auto-rows 属性によって暗黙的に指定されます。
max-content: グリッド項目の最大コンテンツがグリッドトラックを占めることを示すために使用されるキーワードです。
min-content: グリッドトラックがグリッド項目の最大コンテンツと最小コンテンツによって占められていることを示すために使用されるキーワードです。
auto: グリッドトラックが最大の場合、このプロパティはに相当します。グリッドトラックが最小の場合、このプロパティはに相当します。。

grid-template-columns プロパティを確認した後、別のプロパティ Grid-template-rows を見てみましょう。

grid-template-rows グリッドレイアウトの行数 (および高さ) を指定します。値はスペースで区切られたリストで、各値は対応する行の高さを指定します。

この属性の構文形式を見てみましょう。

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

ログイン後にコピー

この属性の値は前の属性の値とまったく同じであることがわかり、あまり覚える必要はありません。簡潔なバージョンを見てみましょう

CSSでグリッド線のサイズを定義する方法

推奨学習: css ビデオチュートリアル

以上がCSSでグリッド線のサイズを定義する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSSでグリッド線のサイズを定義する方法