#优质博文 #CSS #grid #容器查询
Get the number of auto-fit/auto-fill columns in CSS

AI 摘要：这篇博文深入探讨如何在纯 CSS 中获取 grid 布局中 auto-fit/auto-fill 自动列的列数，从而实现如高亮首/末列、斑马纹、响应式非矩形网格等复杂交互，无需任何 JavaScript 或媒体查询（breakpoints）。作者提出了通过 container query 单位、CSS 变量和数学函数自动计算列数的方法，并针对不同浏览器支持和 bug（尤其是 Firefox）提出了解决方案，使技巧能够跨浏览器使用。

author Ana Tudor

Frontend Masters

Get the number of auto-fit/auto-fill columns in CSS

Ever wanted to get the number of auto-fit/auto-fill columns in a grid? For example, because you want to highlight just the items in the first or last row or column? Do something special just for even or for odd rows or columns (e.g. zebra striping)? Or for…

#优质博文 #前端 #css #grid
1fr 1fr vs auto auto vs 50% 50%

AI 摘要：本文详细探讨了 CSS Grid 中三种常见的列宽设置方式（ 1fr 1fr 、auto auto 和 50% 50% ）在不同场景下的表现和差异。作者通过多个示例和截图，分析了这些设置在处理间距（gap）、内容大小、溢出等问题时的行为差异，指出 fr 单位通常表现最为直观和可预测，但也存在“blowout”问题，并提供了解决方案如 minmax(0, 1fr) 。此外，文章还提及了列宽的混合使用以及其他关键词如 min-content 和 max-content 的潜在价值。

author Chris Coyier

#优质博文 #前端 #css #grid
CSS Grid Areas

一篇超级长的关于 CSS Grid 的教程，强烈推荐一读。

AI 摘要：这篇文章介绍了 CSS 网格布局中的命名网格区域（grid areas）及其应用，旨在帮助开发者更好地理解和利用这一特性。以下是文章的要点：

1. 命名网格区域的基本概念：使用 grid-template-areas 属性，开发者可以为每个网格区域指定一个名称，并通过 grid-area 在元素中引用这些区域。这样，布局的管理更加直观和易于维护。

2. 语法规则：命名区域必须符合矩形规则，且每个区域都需定义，即使没有直接使用。通过多行字符串定义多个区域，支持创建多维度布局。

3. 使用案例：
- 简单布局：通过定义基本的网格区域（例如“aside”与“main”），实现基本的布局。
- 复杂布局：通过多个区域字符串，可以轻松构建多行和多列的复杂布局。

4. 动态布局和空单元格：通过修改 grid-template-areas 字符串，可以动态调整布局。同时，可以使用 ... 表示空的网格单元格，提供灵活的布局控制。

5. 开发者工具的帮助：文章强调了命名网格区域可以提高布局的可视化性，使得开发和调试更为高效。

6. ......

总的来说，使用命名网格区域可以极大简化 CSS 网格布局的开发过程，提升可读性和维护性。

via Ahmad Shadeed

Ishadeed

CSS Grid Areas

A fresh look at the CSS grid template areas and how to take advantage of its full potential today.

#优质博文 #前端 #css #grid
Learn CSS Subgrid

AI 摘要：CSS 子网格（subgrid）允许子元素继承父元素的网格定义，解决了嵌套网格中子元素无法对齐的问题。通过在子元素上设置 display: grid 和 grid-template-rows: subgrid ，子元素可以继承父元素的行定义，实现内部元素的对齐。例如，在编辑布局中，使用子网格可以确保标题、描述和图像在不同列中正确对齐。目前，子网格在 Firefox 71+ 和 Safari Technology Preview 中得到支持。  

via Ahmad

Ishadeed

Learn CSS Subgrid

A deep-dive into the new CSS subgrid feature with real-life examples and use-cases.

#前端 #优质博文 #css #grid
CSS Grid full-bleed layout tutorial

AI 摘要：这篇文章介绍了如何使用 CSS Grid 技术解决网页布局中的 “full-bleed”（出血） 问题，即如何让某些元素（如图片和视频）在保持中心文本列宽度固定的同时，能够扩展到浏览器窗口的边缘。作者通过三列布局，中间列固定宽度，两侧列灵活填充空间，实现了文字内容的最佳阅读宽度和其他元素的全宽展示。此外，还提供了适应不同屏幕尺寸的响应式设计思路。

via Josh W Comeau

Joshwcomeau

CSS Grid full-bleed layout tutorial • Josh W. Comeau

Certain layouts are surprisingly dastardly. On the modern web, one of the most common layouts is also one of the trickiest. In this tutorial, I break down how to build the "full-bleed" layout using CSS Grid.

#优质博文 #前端 #css #grid #博客推荐
CSS Grid 的交互式指南（全英）

群友推荐的很棒的博客，进去看了看质量确实很不错，文章都是交互式。可以进去看看历史文章

AI摘要：这篇教程是一个关于 CSS Grid 的互动指南，详细介绍了如何使用 CSS Grid 创建复杂的布局。文章通过各种示例和代码演示，解释了 CSS Grid 的基础知识，包括网格流程、行列的隐式和显式定义、使用 repeat 函数简化定义、子项的定位、网格区域的定义以及如何考虑键盘用户的体验。文章还讨论了对齐技巧和如何利用 CSS Grid 解决常见的布局挑战，旨在帮助读者建立对 CSS Grid 的直观理解，并掌握其强大功能。

via Josh Comeau

Joshwcomeau

An Interactive Guide to CSS Grid • Josh W. Comeau

CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the…

#优质博文 #css #布局 #grid
这篇grid写的非常详细ovo，强推 https://mp.weixin.qq.com/s/dQvrijZxOMJjzwuUZGbQGw

Weixin Official Accounts Platform

图解 CSS Grid 布局

70张图图解CSS Grid 布局~