css网格布局简单介绍

        前端网格布局是一种用于在网页上创建复杂网格系统的布局技术。它允许开发者通过简单的语法来定义和控制元素的排列方式,使得页面布局更加灵活和可预测。在CSS中,网格布局可以通过`display: grid`属性来实现。


         特点
        1. **灵活性**:网格布局可以轻松地创建复杂的网格系统,无论是等宽网格还是不等宽网格。
        2. **响应性**:网格布局能够很好地适应不同屏幕尺寸,因为它们是基于比例的。
        3. **可预测性**:网格布局的布局规则是固定的,这使得设计者和开发者能够更容易地预测和控制元素的布局。
        4. **易用性**:网格布局的语法简单,易于理解和使用。
         和Flex布局的不同之处
        1. **设计理念**:
   - **Flex布局**:主要用于一维布局,即项目的排列方向为水平或垂直。它主要用于对容器内的子元素进行对齐和分配空间。
   - **网格布局**:用于二维布局,可以控制元素在水平和垂直方向上的排列。
        2. **容器和项目**:
   - **Flex布局**:容器属性`display: flex`或`display: inline-flex`;项目属性`display: flex`。
   - **网格布局**:容器属性`display: grid`;项目属性`display: grid`或`display: inline-grid`。
        3. **子元素对齐**:
   - **Flex布局**:子元素可以通过`justify-content`和`align-items`属性进行对齐。
   - **网格布局**:子元素可以通过`justify-self`、`align-self`、`grid-column-start`、`grid-column-end`、`grid-row-start`和`grid-row-end`属性进行对齐和定位。
        4. **行和列**:
   - **Flex布局**:没有专门的行和列属性,主要是通过`flex-direction`来控制主轴的方向。
   - **网格布局**:有专门的行和列属性,如`grid-template-columns`和`grid-template-rows`,允许定义行和列的大小和间隔。
        例子和代码解释


        下面是一个简单的网格布局例子,以及代码解释。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 10px;
  }
  .item {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
  .item-1 {
    grid-column-start: 2;
    grid-column-end: 3;
  }
</style>
</head>
<body>
<div class="container">
  <div class="item item-1">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
</body>
</html>

        在这个例子中,.container类定义了一个网格容器,它有三个列,分别由grid-template-columns属性指定。.item类定义了网格中的项目,它们默认会填充整个网格容器。grid-template-columns: 1fr 2fr 1fr;:这定义了网格容器的列,其中1fr代表一列,2fr代表两列,1fr代表一列。
grid-gap: 10px;:这定义了网格容器中列与列之间的间距。.item-1类通过grid-column-start和grid-column-end属性定义了项目的位置,它占据了从第二列开始到第三列结束的位置。
        在这个例子中,网格布局简单地创建了一个三列的布局,其中中间列占据了两列的空间。网格布局的灵活性体现在你可以轻松地调整列的大小,而无需修改项目的代码。
        总结
        前端网格布局是一种强大的布局技术,它允许开发者创建复杂的网格系统,使得页面布局更加灵活和可预测。与Flex布局相比,网格布局提供了更全面的控制,尤其是在创建复杂的多列布局时。网格布局的行和列属性使得布局设计更加直观,而Flex布局则更适合于单列的灵活布局。
        通过这个例子来展示网格布局的基本概念和语法。然后,还有 网格布局的其他高级特性,例如:
- `grid-template-areas`:允许开发者定义网格区域,并指定哪些项目应该放置在这些区域。
- `grid-auto-columns`和`grid-auto-rows`:自动创建未明确定义的行和列。
- `place-items`:一个简写属性,用于同时设置`align-items`和`justify-items`。
- `grid-template-rows`和`grid-template-columns`:用于定义网格线的名称,这在需要更复杂的布局时非常有用。
 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker 部署Harbor 443端口冲突

如果Harbor的443端口和主机服务器的443端口存在冲突,那么需要修改Harbor的443 修改docker-compose中443端口,那么需要docker-compose.yml和harbor.yml保持一致配置 当修改harbor.yml重启之后不生效的,则需要进入harbor安装路径 执行 ./install.sh 命令 harbor.yml docker-…

Xcode 15 适配 MonkeyDev

升级到Xcode15后,使用Xcode创建MonkeyApp后,运行会报错,本篇文章主要讲述此过程遇到的错误和解决办法。 问题1:找不到libc++.dylib文件 问题描述: Build input files cannot be found: /usr/lib/libstdc++.dylib, /usr/lib/libc++.dylib. Did you forget to declare th…

26.基于springboot + vue实现的前后端分离-就业管理系统

项目介绍 系统分为管理员、企业、求职者三个角色 管理员&#xff1a; 登录、个人中心、学生信息管理、企业信息管理、岗位分类管理、学历信息管理、友情链接管理、新闻资讯管理、收藏管理、招聘信息管理、应聘信息管理、求职者信息管理 企业&#xff1a; 注册、登录、个人…

iperf 测试网卡带宽

需求&#xff1a; 自己在ubuntu上写了一个udp程序&#xff0c;但是延时很大。用iperf测试下实际带宽能达到多少。 步骤&#xff1a; 1&#xff0c;windows 安装&#xff08;iPerf - Download iPerf3 and original iPerf pre-compiled binaries&#xff09; 2&#xff0c;lin…

大数据技术学习笔记(五)—— MapReduce(2)

目录 1 MapReduce 的数据流1.1 数据流走向1.2 InputFormat 数据输入1.2.1 FileInputFormat 切片源码、机制1.2.2 TextInputFormat 读数据源码、机制1.2.3 CombineTextInputFormat 切片机制 1.3 OutputFormat 数据输出1.3.1 OutputFormat 实现类1.3.2 自定义 OutputFormat 2 Map…

JavaScript的for循环与双重for循环,前端开发工程师面试题

问&#xff1a;BFC 与 IFC 区别 BFC 是块级格式上下文&#xff0c;IFC 是行内格式上下文&#xff1a; 内部的 Box 会水平放置水平的间距由 margin&#xff0c;padding&#xff0c;border 决定 问&#xff1a;BFC会与float元素相互覆盖吗&#xff1f;为什么&#xff1f;举例说…

opencv环境配置

opencv环境配置 第一步&#xff1a; 官网下载opencv官网下载地址&#xff0c; 下载完成后解压到相应的目录 第二步&#xff1a; Visudal Studio配置相应的opencv环境变量 先创建一个空的项目打开属性管理器 配置包含目录、库目录和链接器 在包含目录中选择opencv的includ…

[最佳实践]FRPC公网链接:在家也可以炼实验室的丹了

key word: 内网穿透 公网链接 远程ssh链接 远程frpc 远程桌面 网络隧道 应用场景 我们使用ssh链接实验室的机器的时候&#xff0c;一般在实验室内部使用的同一个局域网连接&#xff0c;一般使用的是192.168.xx.xx的网络&#xff0c;但是如果我们在家里&#xff0c;使用的家里…

seata服务器集群搭建

搭建seata-server-1.3服务器对应SpringBoot2.3.12&#xff0c;springcloud2.2.3 <spring-cloud-alibaba.version>2.2.3.RELEASE</spring-cloud-alibaba.version> 首先你安装了nacos 1解压文件 2修改cong/file.conf 让seata集群信息可以共享&#xff0c;我们应该…

MySQL 表锁问题

MySQL 表锁解决 查看哪些表被锁&#xff0c;字段 In_use 表示有多少线程在使用这张表&#xff0c;字段 name_locked 表示表格是否被锁&#xff0c;0 代表锁定状态 mysql> show OPEN TABLES where In_use > 0; -------------------------------------------------------…

day52(vueJS)json-server模拟数据

json-server介绍&#xff1a;&#xff1a;&#xff1a;JSON Server 是一个用于快速搭建 REST API 的工具&#xff0c;它可以帮助我们在开发过程中快速模拟 一个后端 API 服务器&#xff0c;方便前端开发人员进行接口调试和开发。使用 JSON Server&#xff0c;你可以通过创建一个…

基于springboot的网上商城系统设计与实现(程序+数据库+文档)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 目录 一、研…

【QT】重载的信号槽/槽函数做lambda表达式

重载的信号槽 函数指针&#xff1a; int fun(int a,long b) int (*funp)(int, long) fun; 实现回调函数就需要函数指针 信号重载 派生类槽函数发送两个信号 派生类给父类发两个信号 void (SubWidget::*mysigsub)() &SubWidget::sigSub;connect(&subw,mysigsub,t…

农产品采购平台技术解析:Java+SpringBoot+Vue+MySQL

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

如何在2.2.1版Aduino IDE中开发ESP32

ESP32芯片集成了WIFI和蓝牙&#xff0c;而且关于生态也很不错&#xff0c;越来越多的学习者和开发者选择此类芯片&#xff0c;而不像用keil开发STM32或者51一样&#xff0c;ESP32虽然也有官方的ESP32-IDF开发软甲&#xff0c;但是经过我个人的实操体验&#xff0c;不适合小白或…

2025汤家凤考研数学,基础视频课程+百度网盘+PDF真题讲解

平时大家都半开玩笑地讲&#xff1a;我数学想要考150分&#xff01;那索性今天这一期&#xff0c;今天认真和大家聊一下&#xff1a; 想考到考研数学150分&#xff0c;应该如何准备&#xff1f; 如果还有小伙伴不知道在哪看汤神的ke&#xff0c;可以看一下以下 2025汤神全程…

力扣543. 二叉树的直径

Problem: 543. 二叉树的直径 文章目录 题目描述思路复杂度Code 题目描述 思路 1.最大直径 左子树的最大深度 右子树的最大深度&#xff1b; 2.定义一个变量maxDiameter记录最大直径&#xff0c;并编写一个递归函数maxDepth&#xff0c;利用树的后序遍历每次递归求取leftMax&a…

怎样压缩图片大小到kb?超实用技巧!

怎样压缩图片大小到kb&#xff1f;在互联网时代&#xff0c;图片已成为我们日常生活中不可或缺的一部分。然而&#xff0c;随着图片分辨率和质量的提升&#xff0c;它们的文件大小也在不断增加&#xff0c;这不仅占用了大量的存储空间&#xff0c;还可能导致网页加载速度变慢。…

Linux中给复杂命令起别名

目录 1 前言 2 操作步骤 2.1 打开.bashrc 2.2 编辑.bashrc-添加别名 2.3 使别名生效 1 前言 在linux中有些指令会比较长&#xff0c;为了便捷的使用它们&#xff0c;我们就可以采取起别名的方式&#xff0c;具体操作如下。 2 操作步骤 2.1 打开.bashrc 输入如下指令&a…

探索Java中的函数式接口与Streams API的高级用法

引言 在Java中&#xff0c;函数式编程已经不是什么新鲜事物了。从Java 8开始&#xff0c;函数式编程的概念被引入&#xff0c;给我们带来了全新的编程范式。为什么这么多年过去了&#xff0c;咱们还在讨论它&#xff1f;因为&#xff0c;无论是对于老手还是新手程序员来说&…