Mastering CSS Grid 2023 – With 3 cool projects
精通2023版CSS网格布局 – 带有3个酷炫项目

The future of layouts. It’s like Flexbox, but dialled up to eleven
布局的未来。它就像Flexbox，但提升到了十一级。

教程演示🔗

学生数量：42,507 个学生

上次更新时间：2019年10月

教程评分：4.3

教程语言：英语

教程字幕：中文、英语字幕

本课程包括：58 个可下载资源、完整的永久访问权、在移动设备和电视上观看、结业证书、4 篇文章、17 小时 长的随选视频字幕

学习内容

1、如何使用CSS Grid实现响应式布局
2、如何使用CSS Grid构建常规布局
3、所有属于CSS网格规范（CSS Grid Specification）的属性。
4、如何使用CSS Grid构建常用网站，如YouTube？

要求

1、了解一些CSS和HTML知识。
2、Flexbox是可选的，但优先推荐使用。

课程介绍

CSS Grid是CSS中相对较新且未广泛使用的概念。在当前，确保布局易于维护和根据设备尺寸调整至关重要。CSS Grid简化了这一过程。

在这门课程中，我们将深入讲解如何使用CSS Grid构建各种布局。我们涵盖的内容包括：

– CSS Grid的所有属性、工作原理以及使用时可能需要注意的陷阱。
– 布局对齐及其在CSS Grid中的运作，包括网格容器级别和网格项的轨道及项目对齐，以及如何在网格项级别重置对齐。
– 响应式Web设计的基础知识，如媒体查询及其与移动/平板等设备的配合。
– 网格区域及其如何简化响应式Web设计。
– 隐式和显式网格的概念及其区别。
– 对自动放置算法的深入探讨。
– CSS Grid的高级动画，以及目前哪些功能可用。
– 如何将某些Flexbox布局转换为使用CSS Grid。
– 何时选择使用Flexbox而非CSS Grid。
– 在介绍完这些概念后，我们将展示一些基本布局问题及其解决方案，例如：
– 列表布局
– 基本侧边栏布局
– 垂直文本对齐
– 模态框对齐
– 固定底部布局
– 表单字段格式化
– 并期待未来添加更多内容。接着我们会探讨更高级的布局主题，比如：
– 圣杯布局
– 媒体对象布局
– 适应屏幕的图片画廊
– 响应式图片画廊
– 动画侧边栏
– 月历布局
– 报纸封面布局
– 响应式Twitter克隆布局
– 响应式电影画廊
– 如果您还意犹未尽，我们还将提供三个实际应用示例，让您获得所需的经验。它们是：
– 聊天界面设计
– 仿Uber Eats的响应式应用程序
* 仿YouTube的响应式应用程序

探索CSS Grid的奥秘：这门课程详细讲解如何利用CSS Grid创建响应式布局，从基础对齐到高级设计，如列表布局、侧边栏管理。掌握媒体查询、自动放置和动画技巧，通过实例学习圣杯布局到电影画廊的实战应用。提升网站可维护性和用户体验，让你的网页在搜索引擎中脱颖而出。