display grid 概要

最新推荐文章于 2024-10-30 15:44:21 发布

毕业君

最新推荐文章于 2024-10-30 15:44:21 发布

阅读量489

点赞数 4

分类专栏： css 文章标签：前端

本文链接：https://blog.youkuaiyun.com/Cheny_Yang/article/details/137482085

版权

Grid 基本概念:
- 什么是 CSS Grid 布局？
  
  CSS Grid 布局是一个二维布局系统，允许开发者创建复杂的网格布局，这是一个在行和列上同时控制布局的方法。
- Grid 布局与 Flexbox 有什么不同？
  
  与 Flexbox 相比，Grid 帜局主要针对二维布局（可以同时处理行和列），而 Flexbox 更适合一维布局（要么处理行，要么处理列）。Grid 提供了对网格内部元素位置和尺寸的精确控制。
Grid 容器属性:
- display: grid 和 display: inline-grid 有什么区别？
  
  display: grid; 创建一个块级网格，display: inline-grid; 创建一个行内网格。
- grid-template-columns 和 grid-template-rows 如何定义网格的列和行？
  
  grid-template-columns 和 grid-template-rows 用于定义网格的列宽和行高，可以指定固定尺寸、百分比或使用fr单位来分配可用空间。
- grid-gap（或 row-gap 和 column-gap