CSS:グリッド

4041 ワード

CSS Webプログラミング html テキストリンク

9月16日
ネットワークプログラミングリアルタイム講座01-03

CSS-GRIDの使用

HTML

<body>
    <div>TOP</div>
  
    <div id="container">
        <div>LEFT</div>
        <div>CENTER</div>
        <div>RIGHT</div>
    </div>
  
    <div>BOTTOM</div>
  
</body>

div無意識マーク

CSS

div {
	border: 10px solid turquoise;
    }

#container{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	border:dashed 5px black
    	}
#container>div {
	border-color: violet ;
	}

grid-template-columns: 1fr 2fr 1fr;左側center rightを並べて出力(列)

fr

グリッドコンテナ内のスペースの割合の単位を分数で表します.

子供1人あたりのボリュームは順番に使う

・45,67917ではなくpxを指定する・frであればpxに固定する・45,67918・
グリッドとして設定されたレイアウトは、事前に計算され、複数のカラムが設定されます.

しゅつりょく

Reference

この問題について(CSS:グリッド), 我々は、より多くの情報をここで見つけました https://velog.io/@sanglee/CSS-그리드

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Week 2

テンセント2017秋募集筆記試験のプログラミング問題--コード