css grid 自动高度_一行CSS实现十种现代布局

作为一个半路出家的前端，我的css知识基本上在实际工作中一(东)点(拼)一(西)滴(凑)积累起来的。今天来分享一下最近看到的一个不错css视频，我自己学习整理的同时希望对大家也有所帮助。

本文整理自web.dev论坛，由于新冠的原因，今年的活动全程都是工程师们在家录播的。(想看视频的同学可以直接下拉到文章结尾处，点击原文跳转B站收看。)我想讲的视频是 10 modern layouts in 1 line of CSS，即用一行CSS代码实现十种现代布局。为了更好的演示这些布局，作者制作了一个网站：https://1linelayouts.glitch.me/ 大家可以亲自上手试一试。

本文介绍的几种布局基本是依赖CSS的flexbox或者grid。就是我们平时看到的display: flex 或者 display: grid 。开始之前，先介绍一下将要用到的术语。第一个是fr和auto，这两个术语用于网格布局(Grid)，fr表示空间等分，auto表示自动尺寸，同时会考虑到元素中的内容和所占空间最小值。对于网格布局来说，还可以用minmax函数，用来指定布局元素的范围，即不通过媒体查询，也能实现响应式布局。还有单独的min，max，clamp函数，让我们可以在css中加入些逻辑。在这些布局中，我们还可以使用auto-fill自动填充和auto-fit自动调整，来把子元素自动放置到父网格中。这也是不用媒体查询来实现响应式布局的另一个方法。接下来，我们就来一个一个看这些布局是如何实现的。

元素居中

首先，我们来用一行CSS代码来解决布局的最大难题之一: 元素居中。使用grid布局，然后用place-items: center 来实现元素居中。从图中可以看出，