CSS Grid 布局实战：从入门到精通

news2024/11/18 10:17:49

文章目录

    • 前言
    • 一、CSS Grid 布局概述
      • 1.1 什么是 CSS Grid 布局？
      • 1.2 主要特点
    • 二、基本概念
      • 2.1 网格容器
      • 2.2 网格线
      • 2.3 网格轨道
      • 2.4 网格区域
    • 三、常用属性
      • 3.1 定义网格结构
      • 3.2 控制网格项的位置
      • 3.3 控制网格间距
      • 3.4 自动填充和重复
    • 四、实践案例
      • 4.1 项目结构
      • 4.2 HTML结构
      • 4.3 CSS样式
    • 五、响应式布局
      • 5.1 媒体查询示例
    • 六、进阶技巧
      • 6.1 嵌套网络
      • 6.2 动态网络
    • 七、最佳实践
      • 7.1 使用命名区域
      • 7.2 使用fr单位
      • 7.3 使用 auto-fit 和 auto-fill
    • 八、常见问题及解决方法
      • 8.1 网格项超出容器边界
      • 8.2 网格项对齐问题
    • 结语

前言

随着前端技术的不断发展，CSS Grid 布局逐渐成为构建复杂和灵活布局的强大工具。正如某位设计师所说：“好的设计是解决问题的艺术。”CSS Grid 布局不仅简化了布局的创建过程，还提供了更高的灵活性和控制能力。本文将详细介绍 CSS Grid 布局的基本概念、常用属性和实际案例，帮助开发者从入门到精通这一强大的布局工具。

一、CSS Grid 布局概述

1.1 什么是 CSS Grid 布局？

CSS Grid 布局是一种二维布局系统，允许开发者在水平和垂直方向上对齐元素。与传统的 Flexbox 布局相比，Grid 布局更适合处理复杂的多列或多行布局。

1.2 主要特点

  • 二维布局：同时支持行和列的布局。
  • 灵活的对其方式：可以轻松对齐和对齐元素。
  • 强大的控制能力：可以通过属性精确控制网格的大小和位置。

二、基本概念

2.1 网格容器

网格容器是应用了 display: grid 的元素。所有的直接子元素都会成为网格项。

.container {
    display: grid;
}

2.2 网格线

网格线是网格中的虚拟线，用于划分网格区域。网格线可以是显式的（通过 grid-template-columns 和 grid-template-rows 定义）或隐式的（自动生成）。

2.3 网格轨道

网格轨道是网格线之间的空间，可以是行或列。

2.4 网格区域

网格区域是由四条网格线围成的矩形区域，可以包含一个或多个网格项。

三、常用属性

3.1 定义网格结构

  • grid-template-columns：定义列的宽度。
  • grid-template-rows：定义行的高度。
  • grid-template-areas：定义网格区域的名称。
.container {
    display: grid;
    grid-template-columns: 100px 200px auto;
    grid-template-rows: 50px 100px;
    grid-template-areas:
        "header header header"
        "nav main sidebar"
        "footer footer footer";
}

3.2 控制网格项的位置

  • grid-column：定义网格项在列方向上的位置。
  • grid-row：定义网格项在行方向上的位置。
  • grid-area：定义网格项所在的网格区域。
.item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.item2 {
    grid-area: nav;
}

3.3 控制网格间距

  • grid-gap：定义网格项之间的间距。
  • grid-column-gap：定义列方向上的间距。
  • grid-row-gap：定义行方向上的间距。
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    grid-gap: 10px;
}

3.4 自动填充和重复

  • repeat：重复定义网格轨道。
  • auto-fill：自动填充网格轨道。
  • auto-fit：自动适应网格轨道。
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 10px;
}

四、实践案例

为了更好地理解如何在实际项目中应用 CSS Grid 布局，我们来看一个简单的示例。假设我们有一个简单的响应式布局，包括头部、导航、主内容区和侧边栏。

4.1 项目结构

/my-grid-layout
│── /public
│   └── index.html
├── /styles
│   └── styles.css
└── package.json

4.2 HTML结构

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout Example</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <div class="container">
        <header class="header">Header</header>
        <nav class="nav">Nav</nav>
        <main class="main">Main Content</main>
        <aside class="sidebar">Sidebar</aside>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

4.3 CSS样式

/* styles/styles.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas:
        "header header header"
        "nav main sidebar"
        "footer footer footer";
    grid-gap: 10px;
    height: 100vh;
}

.header {
    grid-area: header;
    background-color: #f8f9fa;
    text-align: center;
    padding: 20px;
}

.nav {
    grid-area: nav;
    background-color: #e9ecef;
    padding: 20px;
}

.main {
    grid-area: main;
    background-color: #dee2e6;
    padding: 20px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #ced4da;
    padding: 20px;
}

.footer {
    grid-area: footer;
    background-color: #adb5bd;
    text-align: center;
    padding: 20px;
}

五、响应式布局

CSS Grid 布局的一个重要优势是其强大的响应式能力。通过媒体查询，可以轻松地调整网格结构以适应不同的屏幕尺寸。

5.1 媒体查询示例

/* styles/styles.css */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas:
            "header"
            "nav"
            "main"
            "sidebar"
            "footer";
    }
    .nav {
        order: 2;
    }
    .main {
        order: 3;
    }
    .sidebar {
        order: 4;
    }
    .footer {
        order: 5;
    }
}

六、进阶技巧

6.1 嵌套网络

在某些情况下，你可能需要在一个网格项中嵌套另一个网格。这可以通过在网格项中再次应用 display: grid 来实现。

<!-- public/index.html -->
<div class="container">
    <header class="header">Header</header>
    <nav class="nav">Nav</nav>
    <main class="main">
        <div class="content">
            <div class="card">Card 1</div>
            <div class="card">Card 2</div>
            <div class="card">Card 3</div>
        </div>
    </main>
    <aside class="sidebar">Sidebar</aside>
    <footer class="footer">Footer</footer>
</div>

/* styles/styles.css */
.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
}

.card {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
}

6.2 动态网络

通过 JavaScript 动态生成网格项，可以根据数据动态调整网格布局。

<!-- public/index.html -->
<div class="container">
    <header class="header">Header</header>
    <nav class="nav">Nav</nav>
    <main class="main">
        <div id="content"></div>
    </main>
    <aside class="sidebar">Sidebar</aside>
    <footer class="footer">Footer</footer>
</div>

<script>
    const data = [
        { title: 'Card 1', content: 'This is card 1' },
        { title: 'Card 2', content: 'This is card 2' },
        { title: 'Card 3', content: 'This is card 3' }
    ];

    const contentContainer = document.getElementById('content');

    data.forEach(item => {
        const card = document.createElement('div');
        card.classList.add('card');
        card.innerHTML = `
            <h2>${item.title}</h2>
            <p>${item.content}</p>
        `;
        contentContainer.appendChild(card);
    });
</script>

七、最佳实践

7.1 使用命名区域

使用命名区域可以使布局代码更具可读性和可维护性。

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas:
        "header header header"
        "nav main sidebar"
        "footer footer footer";
    grid-gap: 10px;
}
.header {
    grid-area: header;
}
.nav {
    grid-area: nav;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
.footer {
    grid-area: footer;
}

7.2 使用fr单位

fr 单位表示分数单位，可以根据可用空间自动分配网格轨道的大小。

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 1fr 100px;
    grid-gap: 10px;
}

7.3 使用 auto-fit 和 auto-fill

auto-fit 和 auto-fill 可以自动调整网格轨道的数量和大小，适用于动态内容。

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
}

八、常见问题及解决方法

8.1 网格项超出容器边界

如果网格项的内容过多，可能会超出容器边界。可以通过设置 overflow 属性来解决。

.item {
    overflow: auto;
}

8.2 网格项对齐问题

使用 justify-items 和 align-items 属性可以控制网格项的对齐方式。

.container {
    justify-items: center;
    align-items: center;
}

结语

CSS Grid 布局是一种强大的布局工具，可以极大地简化复杂布局的创建过程。通过本文的介绍，希望读者能够掌握 CSS Grid 布局的基本概念、常用属性和实际应用方法。无论是初学者还是有经验的开发者，都可以从 CSS Grid 布局中受益，构建更加灵活和高效的前端应用。

通过本文的详细介绍，希望能够帮助您更好地理解和应用 CSS Grid 布局，从而构建更加复杂和灵活的前端应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2242751.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

操作系统进程管理实验

操作系统进程管理实验

父子进程 用系统调用fork()函数实现子进程的创建&#xff0c;熟悉进程创建的执行过程。 #include <stdio.h> #include <stdlib.h> #include <unistd.h>int main() {// 打印主进程的 PIDprintf("hello, world (pid: %d)\n", (int)getpid());// 创…
阅读更多...
DB Type

DB Type

P位 p 1时段描述符有效&#xff0c;p 0时段描述符无效 Base Base被分成了三个部分&#xff0c;按照实际拼接即可 G位 如果G 0 说明描述符中Limit的单位是字节&#xff0c;如果是G 1 &#xff0c;那么limit的描述的单位是页也就是4kb S位 S 1 表示代码段或者数据段描…
阅读更多...
获取当前程序运行时的栈大小[C语言]

获取当前程序运行时的栈大小[C语言]

废话前言 一晃已经毕业了4年&#xff0c;也在某个时间点&#xff0c;从面试者转变成了面试官。 进行第一次面试的时候&#xff0c;我好像比候选人还慌张&#xff0c;压根不知道问什么&#xff0c;好在是同行业&#xff0c;看着简历问了一些协议内容以及模块设计思路&#xff0…
阅读更多...
新160个crackme - 098-DueList.4

新160个crackme - 098-DueList.4

运行分析 需破解Name和Code PE分析 ASM汇编程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 ida搜索找到关键字符串 ida动态调试&#xff0c;逻辑如上 算法分析 Name concealstr_1 SU7CSJKF09NCSDO9SDF09SDRLVK7809S4NF str_2 A1LSK2DJF4HGP3QWO5EIR6UTYZ8MXN…
阅读更多...
ETH钱包地址如何获取 如何购买比特币

ETH钱包地址如何获取 如何购买比特币

首先我们要先注册一个交易所 Gate.io&#xff08;推荐&#xff09;: 点我注册 1、注册很简单&#xff0c;通过手机号就可以进行注册了。 2、获取ETH钱包地址 注册好之后&#xff0c;如图所示&#xff0c;点击“统一账户” 3、通过搜索栏搜索ETH&#xff0c;如下图所示 4、点…
阅读更多...
【HOT100第五天】搜索二维矩阵 II,相交链表,反转链表,回文链表

【HOT100第五天】搜索二维矩阵 II,相交链表,反转链表,回文链表

240.搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 先动手写写最简单方法&#xff0c;二重循环。 class Solution { public:bool searchMa…
阅读更多...
.NET 9与C# 13革新：新数据类型与语法糖深度解析

.NET 9与C# 13革新：新数据类型与语法糖深度解析

记录&#xff08;Record&#xff09;类型 使用方式&#xff1a; public record Person(string FirstName, string LastName); 适用场景&#xff1a;当需要创建不可变的数据结构&#xff0c;且希望自动生成 GetHashCode 和 Equals 方法时。不适用场景&#xff1a;当数据结构需…
阅读更多...
冠层四流近似模型的发展历史

冠层四流近似模型的发展历史

1. Kunbelka-Munk theory This is the earlist model using a two-stream approximation d I d z − ( k s ) I s J d J d z ( k s ) J − s I \begin{aligned} &\frac{dI}{dz} -(ks)IsJ\\ &\frac{dJ}{dz} (ks)J - sI \end{aligned} ​dzdI​−(ks)IsJdzdJ​(…
阅读更多...
MySQL-关联查询和子查询

MySQL-关联查询和子查询

目录 一、笛卡尔积 二、表连接 1、内部连接 1.1 等值连接 1.2 非等值连接 2、外部链接 2.1 左外连接-LEFT JOIN 2.2 右外连接-RIGHT JOIN 2.3 全关联-FULL JOIN/UNION 三、子查询 1、嵌套子查询 2、相关子查询 3、insert和select语句添加数据 4、update和select语…
阅读更多...
云计算虚拟化-kvm创建虚拟机

云计算虚拟化-kvm创建虚拟机

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 虚拟化&#xff0c;简单来说就是把一台服务器/PC电脑&#xff0c;虚拟成多台独立的虚拟机&#xff0c;每台虚拟机之间相互隔…
阅读更多...
计算机编程中的设计模式及其在简化复杂系统设计中的应用

计算机编程中的设计模式及其在简化复杂系统设计中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 计算机编程中的设计模式及其在简化复杂系统设计中的应用 计算机编程中的设计模式及其在简化复杂系统设计中的应用 计算机编程中的…
阅读更多...
编程考古-计算机发展（中）

编程考古-计算机发展（中）

晶体管计算机时代 尽管真空管技术标志着计算机步入了现代化的门槛&#xff0c;但其固有的局限性——庞大的体积、高昂的能耗、频繁的故障以及不菲的成本——极大地阻碍了其普及与实际应用。 晶体管的早期 Point-contact transistor 点接触晶体管 1947年&#xff0c;贝尔实验…
阅读更多...
vue2+3 —— Day5/6

vue2+3 —— Day5/6

自定义指令 自定义指令 需求&#xff1a;当页面加载时&#xff0c;让元素获取焦点&#xff08;一进页面&#xff0c;输入框就获取焦点&#xff09; 常规操作&#xff1a;操作dom “dom元素.focus()” 获取dom元素还要用ref 和 $refs <input ref"inp" type&quo…
阅读更多...
报错 No available slot found for the embedding model

报错 No available slot found for the embedding model

报错内容 Server error: 503 - [address0.0.0.0:12781, pid304366] No available slot found for the embedding model. We recommend to launch the embedding model first, and then launch the LLM models. 目前GPU占用情况如下 解决办法: 关闭大模型, 先把 embedding mode…
阅读更多...
Maven 构建项目

Maven 构建项目

Maven 是一个项目管理和构建工具&#xff0c;主要用于 Java 项目。它简化了项目的构建、依赖管理、报告生成、发布等一系列工作。 构建自动化&#xff1a;Maven 提供了一套标准化的构建生命周期&#xff0c;包括编译、测试、打包、部署等步骤&#xff0c;通过简单的命令就可以执…
阅读更多...
【C++笔记】C++三大特性之多态

【C++笔记】C++三大特性之多态

【C笔记】C三大特性之多态 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;C笔记 文章目录 【C笔记】C三大特性之多态前言一.多态1.1 多态的概念1.2 虚函数1.3 虚函数的重写/覆盖1.4 多态的定义及实现 二.虚函数重写的⼀些其他问题2.1 协变(…
阅读更多...
【项目实战】基于 LLaMA-Factory 通过 LoRA 微调 Qwen2

【项目实战】基于 LLaMA-Factory 通过 LoRA 微调 Qwen2

【项目实战】基于 LLaMAFactory 通过 LoRA 微调 Qwen2 一、项目介绍二、环境准备1、环境准备2、安装LLaMa-Factory3、准备模型数据集3.1 模型准备3.2 数据集准备 三、微调1、启动webui2、选择参数3、训练 四、测试五、总结 一、项目介绍 LLaMA-Factory是一个由北京航空航天大学…
阅读更多...
内容占位符：Kinetic Loader HTML+CSS 使用CSS制作三角形原理

内容占位符：Kinetic Loader HTML+CSS 使用CSS制作三角形原理

内容占位符 前言 随着我们对HTML和CSS3的学习逐渐深入&#xff0c;相信大家都已经掌握了网页制作的基础知识&#xff0c;包括如何使用HTML标记构建网页结构&#xff0c;以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能&#xff0c;今天我们一起来完成一个有趣且实…
阅读更多...
SpringSecurity 鉴权认证入门讲解

SpringSecurity 鉴权认证入门讲解

​ Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 ​ 一般来说中大型的项目都是使用SpringSecurity 来做安全框架。小项目有Shiro的比较多&#xff0c;因为相比与Sp…
阅读更多...
【插件】多断言 插件pytest-assume

【插件】多断言 插件pytest-assume

背景 assert 断言一旦失败&#xff0c;后续的断言不能被执行 有个插件&#xff0c;pytest-assume的插件&#xff0c;可以提供多断言的方式 安装 pip3 install pytest-assume用法 pytest.assume(表达式,f’提示message’) pytest.assume(表达式,f‘提示message’) pytest.ass…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023