CSS中grid网格布局（秒懂如何实现网格布局）-菜鸟教程

最新推荐文章于 2024-09-30 15:56:28 发布

码农白衣

最新推荐文章于 2024-09-30 15:56:28 发布

阅读量2.8k

点赞数 22

分类专栏： JS html 前端知识文章标签： css 前端

本文链接：https://blog.csdn.net/m0_73916603/article/details/137692088

版权

前端知识同时被 3 个专栏收录

62 篇文章 5 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

html

34 篇文章 0 订阅

订阅专栏

27 篇文章 0 订阅

订阅专栏

grid-template-columns 和 grid-template-rows：

grid-gap、grid-row-gap 和 grid-column-gap：

grid-template-areas：

grid-auto-flow：

grid-auto-columns 和 grid-auto-rows：

一、概念

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

二、使用

1.网格元素

网格布局由一个父元素及一个或多个子元素组成。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30

了解本专栏