CSSグリッド

15186 ワード
grid CSS テキストリンク 
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    div{
      border:5px solid gray;
    }
    </style>
  </head>
  <body>
    <div> navigation article  </div>
    <div> article </div>

  </body>
</html>
このようなコードが作成されると、Webページは次のように出力されます.

ここで、レイアウトを縦方向ではなく横方向に変更する場合は、作成したdivラベルに親ラベルを追加する必要があります.divタグを使用して親タグを作成した後、gridにIDをランダムに付与します.後でラベルにアイデンティティー・グリッドのスタイルを指定します.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #grid{
        border:5px solid pink;
        display:grid;
        grid-template-columns:150px 1fr;
      }
    div{
      border:5px solid gray;
    }
    </style>
  </head>
  <body>
    <div id="grid">
    <div> navigation article  </div>
    <div> article </div>
    </div>

  </body>
</html>
上のコードでは、displayプロパティはhtmlの要素です.
(マークを含む、英語でelement)のレンダーボックス(レンダー-画像をビジュアルフォーマットに変換-スクリーンメディア用のオブジェクトの1つで、padding、borders、および余白を持つ)
表示される属性タイプ、すなわち、要素をどのように表示するかを示す属性がdisplayである.リファレンス
ここで属性を表示し、値をgridに設定すると、縦に並ぶボックスが横に並んでいることがわかります.
  grid-template-columns:150px 1fr;
最初のコラムの体積は150ピクセル、右のコラムはすべてを占めているという意味です.
このとき、画面を拡大または縮小しても、左欄の体積は150画素に保たれ、右欄の大きさも調整されます.
これを1 fr 1 frに変更すると、画面全体のサイズが2の場合、画面のサイズに応じて1:1の割合でボリュームを調整することがわかります.
箱の中のテキストが大きくなると、サイズも自動的に調整されます.

複数のボックスを作成するにはどうすればいいですか?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #grid{
        border:5px solid pink;
        display : grid;
        grid-template-rows :repeat(2,minmax(200px,auto));
        grid-template-columns: repeat(3,minmax(200px,auto)) ;
        grid-gap: 2vw;
        line-height:200px;/*글자 세로 중간에 위치 */
      }
    div{
      border:5px solid gray;
    }
    </style>
  </head>
  <body>
    <div id="grid">
    <div> navigation article  </div>
    <div> article </div>
    <div> article </div>
    <div> article </div>
    <div> article </div>
    <div> article </div>
    </div>

  </body>
</html>
上のコードを実行すると、次の結果が出力されます.

次は完全なコードの一部です.
grid-template-rows:repeat(2,minmax(200px,auto));
minmax(200 px,auto):メッシュの長さは少なくとも200 pxであり、最大値は自動成長である.
repeat(a,b):同じb設定をa個のボックス(この場合、動作基準)に適用することを示す.
前コース1週間
c#Bitmap byte[]Streamファイル相互変換