1分コードCssGrid
Grid
Flexと現在学習しているGridの最大の違いは
Flexは一方向レイアウトシステム(1次元)
Gridは2方向(横方向と縦方向)レイアウトシステム(2 D)
親要素div.containerをメッシュコンテナ(Grid container)として使用
サブエレメントdiv.itemをGrid Itemに変換
コンテナに適用されるプロパティ
display: grid;
grid-template-rows / grid-template-columns
grid-template-rowsは行(row)のレイアウトです
Grid-template-columnsはカラムのレイアウトです
ex)
grid-template-columns: 1fr 1fr 1fr;メッシュを3つの領域に分割して処理するgrid-template-columns: repeat(3, 1fr)も同じ意味です.例えば、9個ある場合、1 frは3個であるため、3*3である.
コードの例
<html>
<head>
</head>
<style>
*{
margin:0;
padding:0;
border:0;
}
.container{
display:grid;
grid-template-columns: 4fr 6fr;
grid-gap:1rem;
}
.item{
background-color:skyblue;
border:solid 1px black;
text-align:center;
}
</style>
<body>
<div class="container">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
</div>
</body>
</html>grid-template-columns: 4fr 6fr;grid-template-columns: 40% 60%;を用いればgrid-gapより広い処理を行い、ドラッグアンドドロップバーを生成し、できればfrを使用することが望ましい.grid-auto-rows
1) grid-auto-rows : 200px
2) grid-auto-rows : minmax(200px, auto)
プロジェクトに適用されるプロパティ
justify-self
align-self
grid-row
grid-column
<html>
<head>
</head>
<style>
*{
margin:0;
padding:0;
border:0;
}
.container{
display:grid;
grid-template-columns: repeat(3,1fr);
grid-gap:1rem;
}
.item{
background-color:skyblue;
border:solid 1px black;
text-align:center;
}
.item:nth-child(1){
grid-column : 1/4;
}
.item:nth-child(4){
grid-column : 3;
grid-row : 2/4;
}
</style>
<body>
<div class="container">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
<div class='item'>5</div>
<div class='item'>6</div>
<div class='item'>7</div>
<div class='item'>8</div>
<div class='item'>9</div>
</div>
</body>
</html>
1番は
grid-column : 1/4;で横方向に処理され、1番は左頂角(1)から右頂角(4)まで処理されます.4つ目は
grid-column : 3; grid-row : 2/4;であり、縦方向から2番目の処理から4番目の処理までであるが、左側に位置し、右側に移動するためにgrid-column : 3で左から3番目の位置部分まで存在する.ソース
1分エンコーディング
Reference
この問題について(1分コードCssGrid), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/1분-코딩-CssGridテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol