把浮动放到今天来聊，可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了，Web的布局还会有谁用浮动呢”？那么真的是如此吗？浮动真的要退出CSS的舞台成为历史吗？我的答案是不可能的。不管CSS怎么发展，浮动都还有其存在的意义和作用，而且在一些场景中是离开不浮动的，最起码近几年之内是不可能的。至于为什么，请继续往下阅读。

这个话题是@Rachel Andrew于2019年9月在英国爱丁堡举办的Finch front的一场演讲，其原标题是Does it work? Using the new CSS Layout，我在这里将其译为这些用于布局的新属性能用吗？。这个话题中的内容非常的有意思，其中有些内容在小站上也有过相应的介绍。今天看了该PPT，觉得有些内容还是非常的有意思，值得和大家分享。

Web布局可以说是灵活的也是久被受限的。在众多的开发者眼里，Web的布局就应该是方方正正的，因为Web中的每个元素都类似一个盒子，这些盒子就是方方正正，规规矩矩地。同时在很多视觉的眼里也认为，Web的布局无法打破矩形排列的限制。比如说，要在Web中实现一个类似杂志的排版是非常困难的，甚至是不太可能的。值得庆幸的是，时至今日，Web的技术在不断的革新，很多新的特性可以让我们打破这样的限制，让你在Web上实现像杂志一样的排版布局。接下来，我们就来看看，在Web中实现媒体布局会有哪些亮点，有可能会用到哪些特性。

随着Web技术不断的革新，CSS近几年也变得多年前要更强大。在Web开发中，CSS是不可或缺的一部分，对于很多Web开发者来说，有很多CSS属性不知道，或者说他们知道，但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日，其中有一些CSS的属性可以让开发者能节约更多的时间。比如说，在Web布局中，现代CSS特性就可以更好的帮助我们快速实现，例如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等。在本文中，我将会介绍一些不同的CSS属性来实现这些效果，希望大家会感兴趣。更希望对大家今后的工作有所帮助。

告诉大家一个好消息，The Screen Fold API 已经进入 W3C规范的ED阶段 了。这个规范主要可以帮助我们以后为使用折叠屏设备用户提供一个更好的用户体验，即 为折叠屏设备在不同的折叠状态（“姿势”）提供相应的布局。这个规范主要由 三星（Samsung） 的 @Diego González 和 英特尔（Intel Corporation） 的 @Kenneth Rohde Christiansen 一起起草的，虽然目前只是处于规范的 ED 阶段，但这为我们今后在折叠屏设备上实现Web布局有了一定的理论依据。也许在未来，这里面的一些属性或API还会有所变动，但这并不影响我们去探究或参与讨论。或许说不定明年，或者后年你就在实际业务中需要面对折叠屏幕的适配需求。如果你感兴趣的话请继续往下阅读。

Flexbox布局 已是目前最为流行的Web布局方式之一，它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。但也是因为它有极大的灵活性，里面隐藏了一些不为人知的细节，如果不是对Flexbox极为熟悉或者对其规范极为了解的话，其中有很多细节将会被遗漏，而这些细节又会让你在使用的感到困惑，甚至是带来一定的麻烦。这次在优化imgcook的Flexbox布局时，重新阅读了一次Flexbox的规范，发现自己曾忽略了部分重要信息。为此在这篇文章中，将Flexbox布局，CSS的书写模式，逻辑属性，对齐方式结合在一起整理了一篇笔记，希望对于想了解或使用Flexbox碰到痛楚的同学有所帮助。

Grid 布局指的是 CSS Grid Layout，它和以往 CSS 框架（CSS Framework）中所说的网格系统（Grid System）有所不同。它是一个基于网格的二维布局系统，在 CSS 中有三个版本的规范（Level 1、Level 2 和 Level 3，其中 Level 1 和 Level 2 已进入 W3C 规范 TR 阶段，Level 3 目前还在 ED 阶段）从不同的角度定义 CSS 网格布局模块，这几个模块是专门为解决布局问题而创建的。另外，到目前为止，在 CSS 的系统中，只有 CSS Grid 布局才是二维布局。同时它也是一个复杂的布局系统，所涉及到布局知识要比以往了解的布局模块（比如我们熟悉的 Flexbox 布局）要复杂得多。为此，在图解 CSS 系列中，将分几篇文章来和大家一起探讨 CSS Grid 布局模块。

在上一节中，主要介绍了 CSS 网格布局中的一些重要概念和相关术语。从这些概念和术语中，从侧面也再次说明CSS 网格布局到目前为止是最为复杂的一个布局系统，换句话说，CSS 网格布局系统中会有很多属性，这些属性和 Flexbox 布局有些类似，有些属性只能作用于网格容器，有些属性只能作用于网格项目。而在这篇文章中，先从可用于网格容器的属性，即使用display属性创建网格容器和网格项目， grid-template-areas、grid-template-columns 和 grid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。

在第二部分中主要介绍了如何使用display来创建网格容器和网格项目，以及怎么使用 grid-template-columns、grid-template-rows 和 grid-template-areas 定义显式网格。在这部分（Part3）将和大家探讨如何设置网格轨道尺寸？简单地说，在grid-template-columns 和 grid-template-rows 中可以显式设置网格轨道大小（列宽和行高），而且设置大小的方式有很多种方式，比如使用不同的长度单位，使用关键词，使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。