Embedded Files
以前CSSの２段落のところでgridの話をしましたが、レイアウトのコマンドとしてもう少しそのパラメータについて詳しく説明しましょう。
以前に使ったコードを最初にリストします。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="layout23_grid.css"> </head>
</head>
<body>
<h1>3段落 2columnです。</h1>
<p>これは、2columnをgridで実行した例です。</p>
<div class="container">
<div class="left">
<div class="item">1つ目</div>
<div class="item">3つ目</div>
<div class="item">５つ目</div>
</div>
<div class="right">
<div class="item">2つ目</div>
<div class="item">4つ目</div>
<div class="item">6つ目</div>
</div>
</div>
</div>
</body>
</html>
CSS
.container {
display: grid;
width: 20%; /* 幅を50%に設定 */
grid-template-columns: 1fr 1fr; /* 2つの列に均等分割 */
}
.item{
background: #0bd;
color: #fff;
margin: 10px;
padding: 10px;
}
Page updated
Google Sites
Report abuse