一行 CSS 实现 10 种现代布局( 三 ) _CSS

当我们将 auto-fit 改为 auto-fill:

8、卡片弹性适应<div class="parent white"><div class="card yellow"><h3>Title - Card 1</h3><p contenteditable>Medium length description with a few more words here.</p><div class="visual pink"></div></div><div class="card yellow"><h3>Title - Card 2</h3><p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p><div class="visual blue"></div></div><div class="card yellow"><h3>Title - Card 3</h3><p contenteditable>Short Description.</p><div class="visual green"></div></div></div> .parent {height: auto;display: grid;grid-gap: 1rem;/*核心*/grid-template-columns: repeat(3, 1fr);}.visual {height: 100px;width: 100%;}.card {display: flex;flex-direction: column;padding: 1rem;justify-content: space-between;}h3 {margin: 0}无论是宽度或高度的收缩还是延展，都可以完美的展现 card 的布局。

文章插图

9、使用 clamp 实现 fluid typography

<div class="parent white"><div class="card purple"><h1>Title Here</h1><div class="visual yellow"></div><p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p></div></div>

 .parent {display: grid;place-items: center;}.card {/*核心*/width: clamp(23ch, 50%, 46ch);display: flex;flex-direction: column;padding: 1rem;}.visual {height: 125px;width: 100%;}

使用最新的 clamp() 方法可以一行实现 fluid typography 。提高 UX，非常适合包含阅读内容的 card，因为我们不希望一行字太短或太长。

文章插图

10、完美实现比例aspect-ratio属性，当我调整卡片的大小时，绿色的视觉块会保持这个 16 x 9 的纵横比。长宽比由于aspect-ratio属性而固定设置为: 16 / 9 。

<div class="parent white"><div class="card blue"><h1>Video Title</h1><div class="visual green"></div><p>Descriptive text for aspect ratio card demo.</p></div></div>

.parent {display: grid;place-items: center;}.visual {/*核心*/aspect-ratio: 16 / 9;}.card {width: 50%;display: flex;flex-direction: column;padding: 1rem;}

在展现 CMS 或其他设计内容时，我们会期望图片、video、卡片能够按照固定的比例进行布局。而最新的 aspect-ratio 就能优雅的实现该功能(使用 chrome 84+)