myesn

myEsn2E9

hi
github
ホームアーカイブ作品集开发助手水龙头

CSS 最もシンプルな多列レスポンシブレイアウト

#CSS16
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
.container には、グリッド表示があり、自動で列を作成し、最小幅が560pxで1frの幅を持つように設定されている。間隔は10pxで、縦方向にスクロールされる。この設定は、大画面では3分割、中画面では2分割、小画面では1分割のレスポンシブレイアウトを実現するためのものである。
<div class="コンテナ">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

.コンテナ {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
  gap: 10px;
  flex-direction: column;
  overflow-y: scroll;
}

参考#

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。