開発プロセス中に、2X2または3X3形式で複数の画像を配置するように求められる場合があります。隣接する2つの画像の上下と左右のギャップが同じである必要があります。
一.padding-top / margin-top、padding-bottom / margin-bottom
1.コード:
<div class="page-container">
<div class="layout-wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item margin"></div>
<div class="item margin"></div>
<div class="item margin"></div>
<div class="item margin"></div>
</div>
</div>
* { padding: 0; margin: 0; }
.page-container {
width: 100%;
height: 100vw;
background-color: #F5F5F5;
}
.layout-wrapper {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-shrink: 0;
width: 24.1%;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}
.item.margin { margin-top: 1.2%; }
2.効果画像:
3.キーポイント:
padding-top、padding-bottom.margin-top、margin-bottomの値がパーセンテージとして設定されている場合、計算結果は親要素の幅に基づいています。
上記の知識は主にここで使用されます。
2.グリッドレイアウト
1.コード:
<div class="page-container">
<div class="layout-wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
* { padding: 0; margin: 0; }
.page-container {
width: 100%;
height: 100vw;
background-color: #F5F5F5;
}
.layout-wrapper {
width: 80%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: 200px 200px;
grid-gap: 12px;
}
.item {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 4px 4px rgba(0,0,0,0.05);
}
2.効果画像:
3.キーポイント:
グリッドレイアウトは、多くの複雑なページレイアウトを簡単に実装できます。非常に実用的
Webページの編集では、この効果がより一般的に使用されます。もちろん、他の方法を使用して同じ効果を達成することもできます。