RAM(繰り返し、自動、最小最大)
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
この 7 番目の例では、これまでに学習したコンセプトを組み合わせて、自動的に配置される柔軟な子を持つレスポンシブ レイアウトを作成します。非常に便利です。ここで覚えておくべき重要な用語は、repeat
、auto-(fit|fill)
、minmax()
です。これらは RAM という頭字語です。
まとめると、次のようになります。
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
ここでも repeat()
を使用していますが、今回は明示的な数値の代わりに auto-fit
キーワードを使用します。これにより、これらの子要素の自動配置が有効になります。これらの子は、基本の最小値が 150px
で最大値が 1fr
です。つまり、小さい画面では 1fr
の幅全体を占有し、幅が 150px
に達すると同じ行に流れ始めます。
auto-fit
を使用すると、完全に空のトラックは 0
に縮小され、塗りつぶされたトラックはスペースを占有します。ただし、これを auto-fill
に変更すると、空のトラックは、塗りつぶされた場合と同じ容量のスペースを占有します。
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
<div class="parent white">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2023-10-25 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2023-10-25 UTC。"],[],[]]