CSS
CSS Grid Layout is a powerful and flexible layout system for dividing and arranging web page content into rows and columns.
Grid Layout
CSSのグリッドレイアウトは、ウェブページのコンテンツを行と列に分割して、複雑なレイアウトを簡単に作成できる強力なツールです。
基本概念
- グリッドコンテナ（Grid Container）
- グリッドレイアウトを適用する要素です。この要素に display: grid; を設定すると、子要素がグリッドアイテムとして配置されます。
- グリッドアイテム（Grid Item）
- グリッドコンテナ内の直接の子要素です。これらは自動的に行と列に配置されます。
- グリッドトラック（Grid Track）
- 行（row）や列（column）を指します。これらは grid-template-rows や grid-template-columns プロパティを使用して定義されます。
- グリッドライン（Grid Line）
- 行や列の間の境界線です。グリッドアイテムの配置やサイズを指定する際に使用します。
基本的なプロパティ
- display: grid;
- 要素をグリッドコンテナに変えます。
- grid-template-columns と grid-template-rows
- 列と行のサイズを定義します。例えば、grid-template-columns: 100px 200px; は2つの列を定義し、それぞれの幅を100pxと200pxに設定します。
- grid-column と grid-row
- グリッドアイテムの位置とサイズを指定します。例えば、grid-column: 1 / 3; は1列目から3列目までをカバーすることを意味します。
Sample
1
2
3
4
HTML
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
margin: 1em auto;
}
.grid-item {
background-color: #ddd;
border: 1px solid #333;
text-align: center;
padding: 20px;
}