使用Grid网格布局的几种页面布局

最新推荐文章于 2024-06-20 12:53:56 发布
最新推荐文章于 2024-06-20 12:53:56 发布
阅读量1.4k 收藏 8
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45939191/article/details/108410322
版权
项目居中布局

实现效果，不管页面大小，项目总是位于页面的中间

<style type="text/css">
			.ex-container {
			/*允许改变元素的宽高*/
				resize: both;
				position: relative;
				overflow: hidden;
				width: 300px;
				height: 300px;
				z-index: 2;
				box-shadow: 0 0 20px -10px #026b79;
				display: grid;
				align-items: center;
				background-color: white;
			}

			.parent {
				height: 100%;
				width: 100%;
				display: grid;
				place-items: center; /*start/end/stretch(左上/右下/拉伸)*/
				/*容器内项目居中显示*/
				background-color: #a9e2ea;
			}

			.box {
				font-size: 2rem;
				padding: 1rem;
				/* display: grid;
				place-items: end; */
				border-radius: 1rem;
				border-style: dashed;
				background-color: #f7c8ab;
				border-color: #feb180;
			}
		</style>
		<!-- 项目居中布局，不管容器的大小，项目总是占据中心点 -->
			<div class="ex-container">
				<div class="parent blue">
					<div class="box coral" contenteditable>
						:)
					</div>
				</div>
			</div>

在这里插入图片描述

2.并列布局

并列布局，就是多个项目并列，如果宽度不够的话，项目会往下排

<style type="text/css">
		.container {
			resize: both;
			position: relative;
			overflow: hidden;
			width: 400px;
			height: 400px;
			z-index: 2;
			box-shadow: 0 0 20px -10px #0000FF;
			display: grid;
			align-items: center;
			background-color: #fff;
		}
		.parent {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;
			height: 100%;
		}
		/* flex属性是flex-grow、flex-shrink、flex-basis这三个属性的简写形式。 */
		/* flex-basis：项目的初始宽度。
flex-grow：指定如果有多余宽度，项目是否可以扩大。
flex-shrink：指定如果宽度不足，项目是否可以缩小 */
		.box {
			font-size: 2rem;
			padding: 1rem;
			border-radius: 1rem;
			border-style: dashed;
			background-color: #d4f2c4;
			border: 1px solid #b9dba9;
			margin: 5px;
			flex: 1 1 150px;
			flex: 0 1 150px;
			display: grid;
			place-items: center;
		}
	</style>
	<div class="container">
		<div class="parent">
			<div class="box">1</div>
			<div class="box">2</div>
			<div class="box">3</div>
		</div>
	</div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.两栏布局

两栏布局，一个边栏，一个主栏，边栏宽度不变，主栏宽度会随着页面宽度而改变

在这里插入图片描述

<style type="text/css">
		.container {
			resize: both;
			position: relative;
			overflow: hidden;
			width: 400px;
			height: 400px;
			z-index: 2;
			box-shadow: 0 0 20px -10px #0000FF;
			display: grid;
			align-items: center;
			background-color: #fff;
		}
		.parent {
			width: 100%;
			height: 100%;
			display: grid;
			/*边栏宽度范围为150px~25%，第而列为剩下宽度*/
			grid-template-columns: minmax(150px, 25%) 1fr ;
		}
		.section{
			font-size: 1.5rem;
			padding: 1rem;
			border-style: dashed;
		}
		.yellow {
			background-color: #fee8b4;
			border: 1px solid #fee8b4;
		}
		.purple {
			background-color: #dfd3e4;
			border: 1px solid #dfd3e4;
		}
	</style>
	<div class="container">
		<div class="parent">
			<div class="section yellow">
				边栏
			</div>
			<div class="section purple">
				主栏
			</div>
		</div>
	</div>
4.三明治布局

即将页面分为页头，主体，尾部
在这里插入图片描述

<style type="text/css">
		.container{
			width: 400px;
			height: 400px;
			overflow: hidden;
			resize: both;
			position: relative;
			z-index: 2;
			box-shadow: 0 0 20px -10px #00FF00;
			display: grid;
			align-items: center;
			background-color: #eee;
		}
		.parent {
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-rows: auto 1fr auto;
		}
		.section {
			font-size: 1.5rem;
			padding: 1rem;
			border-style: solid;
		}
		.blue {
			border: 1px solid #81cfd9;
			background-color: #a9e2ea;
		}
		.coral {
			border: 1px solid #f7c8ab;
			background-color: #feb180;
		}
		.purple {
			border: 1px solid #dfd3e4;
			background-color: #dfd3e4;
		}
	</style>
	<!-- 三明治布局，页面在垂直方向分成三部分：页眉，内容去，页脚 -->
	<div class="container">
		<div class="parent">
			<div class="section blue">Header</div>
			<div class="section coral">Main</div>
			<div class="section purple">Footer</div>
		</div>
	</div>
5.圣杯布局

和三明治布局类似，不过主体部分又区分了三栏

在这里插入图片描述
如下图，将容器分成9个单元格，头和尾部占据了3个单元格，主体的三栏每一栏占据一个单元格
在这里插入图片描述

<style type="text/css">
		.container {
			width: 400px;
			height: 400px;
			resize: both;
			overflow: hidden;
			display: grid;
			align-items: center;
			box-shadow: 0 0 20px -10px #0000FF;
		}
		.parent {
			display: grid;
			/*设置行高*/
			grid-template-rows: auto 1fr auto/ auto 1fr auto;
			width: 400px;
			height: 400px;
		}
		.section {
			font-size: 1.5rem;
			padding: 1rem;
		}
		.pink {
		/*grid-column：设置列的开始的网格线和结束的网格线*/
			grid-column: 1/4;
			background-color: #f5e0e9;
			border: 1px solid #f9bed6;
		}
		.left-side {
			grid-column: 1/2;
			background-color: #a9e2ea;
			border: 1px solid #81cfd9;
		}
		.coral {
			grid-column: 2/3;
			background-color: #f7c8ab;
			border 1px solid #feb180; 
		}
		.right-side {
			/* grid-column:grid-column-start和grid-column-end的合并简写表示开始和结束网格线 */
			grid-column: 3/4;
			background-color: #fee8b4;
			border: 1px solid #fee8b4;
		}
		.green {
			grid-column: 1/4;
			background-color: #d4f2c4;
			border: 1px solid #b9dba9;
		}
	</style>
	<div class="container">
		<div class="parent">
			<div class="section pink">Header</div>
			<div class="section left-side blue">left sideBar</div>
			<div class="section coral">main content</div>
			<div class="right-side yellow section">right sidebar</div>
			<div class="green section">footer</div>
		</div>
	</div>
6. 12跨越网格

12网格布局，如下图，将网格分为12列，每个项目跨越不同的网格，第一个项目跨越12列，

在这里插入图片描述

<style type="text/css">
		.container {
			/* both:允许用户控制元素的宽和高 */
			resize: both;
			width: 400px;
			height: 400px;
			overflow: hidden;
			display: grid;
			align-items: center;
			box-shadow: 0 0 20px -10px #0000FF;
		}
		.parent {
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: repeat(12, 1fr);
		}
		.section {
			display: grid;
			place-items: center;
			text-align: center;
		}
		.span12 {
		/*span：左右边框跨域的网格*/
			grid-column: 1/span 12;
			background-color: #d4f2c4;
		}
		.span6 {
			grid-column: 1/ span 6;
			background-color: #f7c8ab;
		}
		.span4 {
			grid-column: 4/span 4;
			background-color: #a9e2ea;
		}
		.span2 {
			grid-column: 3/ span 2;
			background-color: #fee8b4;
		}
	</style>
	<div class="container">
		<div class="parent">
			<div class="section span12">span12</div>
			<div class="section span6">span6</div>
			<div class="section span4">span4</div>
			<div class="section span2">span2</div>
		</div>
	</div>
7.设置间距

项目之间设置间距

在这里插入图片描述

<style type="text/css">
		.container {
			resize: both;
			width: 400px;
			height: 400px;
			overflow: hidden;
			display: grid;
			align-items: center;
			box-shadow: 0 0 20px -10px #000000;
		}
		.parent {
			width: 100%;
			height: 100%;
			display: grid;
			/* 行间距和列间距的合并简写 grid-gap: <grid-row-gap> <grid-column-gap> */
			grid-gap: 1rem;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		}
		.box {
			border-radius: 1rem;
			font-size: 2rem;
			padding: 1rem;
			display: grid;
			place-items: center;
		}
		.box1 {
			background-color: #f5e0e9;
		}
		.box2 {
			background-color: #dfd3e4;
		}
		.box3 {
			background-color: #a9e2ea;
		}
		.box4 {
			background-color: #d4f2c4;
		}
	</style>
	<div class="container">
		<div class="parent">
			<div class="box box1">1</div>
			<div class="box box2">2</div>
			<div class="box box3">3</div>
			<div class="box box4">4</div>
		</div>
	</div>
鸣拙
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android ListView 网格布局
03-08
总结起来，创建一个Android的网格布局ListView主要涉及以下几个步骤：设计网格项布局、创建自定义Adapter、在Activity中设置GridView并加载数据。通过灵活地调整布局和Adapter，你可以实现各种复杂的网格布局效果。...
前端页面布局之【Grid布局】详解
商务合作/软件定制/学习交流
10-07 2291
前端页面布局之【Grid布局】详解
最强大的布局方案——网格Grid布局万字详解
郊眠寺
12-17 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。移动端浏览器：*) 从上图我们可以看出第一列的宽度为150px，第二列和第三列以1：2的比例均分了剩余空间) 如上图所示，第三列的宽度最小不小于10px，最大不超过50px。
HTMLCSS学习笔记（二十三）GRID布局_html 网格布局
最新发布
06-20 768
划分网格的线，称为"网格线"。水平网格线划分出行，垂直网格线划分出列。1、启动网格布局2、划分行和列为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。3、设置行间距 || 列间距5、规划子元素放置的顺序（默认为先排行后排列）6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式。
CSS - 网格布局（grid）
伏城之外的博客
07-20 6849
网格布局、grid、表格布局、二维布局、网格轨道、grid-template-rows、grid-template-columns、grid-template、fr单位、min-content、max-content、minmax、auto-fill、auto-fit、网格单元、网格项目、网格线、grid-row、grid-column、grid-area、网格区域、grid-template-area、网格间距、gap、显示网格、隐式网格、稀疏包装、密集包装、网格单元对齐、网格项目对齐、统一对齐、单独对齐
图解 CSS Grid 布局
小马甲
07-17 2621
在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。
GridLayout布局管理器
qiu__hui的博客
06-04 779
package test3; //这段代码主要是为展示如何使用GridLayout布局管理器，在程序中将九个普通按钮组件按照此布局管理器放置在内容面板中。 import javax.swing.*; import java.awt.*; public class test3 { static final int WIDTH=300;   static final int HEIGHT
jQuery网格布局和列表布局切换特效特效代码
03-20
在jQuery中实现这两种布局的切换，主要涉及到以下几个关键知识点： 1. **DOM操作**：jQuery提供了一系列方便的方法来操作DOM元素，如`addClass()`、`removeClass()`和`toggleClass()`。在本案例中，这些方法用于...
css实现三栏布局的几种方法及优缺点
09-22
Grid布局也是CSS3的一种新特性，它提供了一种二维布局系统，特别适合创建复杂的网格布局，包括三栏布局。 优点： - 强大的二维布局能力，可以精确控制单元格大小和位置。 - 对现代浏览器支持良好。 缺点： - 老...
Android中使用GridView进行应用程序UI布局的教程
09-02
6. `android:stretchMode`：控制单元格的拉伸模式，有以下几种选择： - `none`：不拉伸任何内容。 - `spacingWidth`：拉伸行间距。 - `columnWidth`：仅拉伸单元格本身。 - `spacingWidthUniform`：同时拉伸...
纯CSS响应式六边形网格布局
12-13
六边形网格布局因其独特的形状和空间利用率，常用于展示项目、产品或者用户头像，能够使页面设计更加立体和富有创意。 在hexagons.css中，主要涉及以下几个关键技术点： 1. **伪元素和CSS变换**：CSS的`:before`和...
Grid布局——页面布局如此简单
weixin_33950035的博客
12-30 1782
前言 CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。 介绍 gird布局是一种基于二维的网格布...
页面布局之grid布局
exploringfly的博客
02-21 2153
Grid布局       首先，从概念上来说这是一个网格布局，核心是网格容器（Grid Container）和网格项（Grid Item），也就是parent和children的关系。与flex布局相类似       网格系统引入了新的单位：分数fr，每一个fr单元分配一个可用空间，如果元素被设置为1fr 1fr 1fr 1fr，那么空间就会被平均分配为4份，每一个元素分别占1/4。      对...
页面怎么布局，当然是Grid ԅ(¯﹃¯ԅ)
苦作舟的空城机
06-09 898
文章目录序flex和float性能测试正文开始Gird 与 Flex区别Grid学习前置 容器和项目 行和列 单元格 网格线Grid学习使用 设置display行列属性 设置行列宽高百分比atuo fr 关键字 repeat 设置行列间距grid-template-areas合并单元格有趣的布局示例 序 在讲述Grid布局之前，先聊聊前端目前比较流行布局方式，前端开发者应该都知道Flex布局，Flex布局真的非常好用 相较于原来的Float浮动布局时代，Flex布局做到了更优解 并且在性能上，Flex布局性
三十一、Java图形化界面设计——布局管理器之GridLayout（网格布局）
热门推荐
liujun13579的专栏
07-22 22万+
网格布局特点： l  使容器中的各组件呈M行×N列的网格状分布。 l  网格每列宽度相同，等于容器的宽度除以网格的列数。 l  网格每行高度相同，等于容器的高度除以网格的行数。 l  各组件的排列方式为：从上到下，从左到右。 l  组件放入容器的次序决定了它在容器中的位置。 l  容器大小改变时，组件的相对位置不变，大小会改变。 l  设置网格布局行数和列数时，行数或者列数可以有一个
Grid布局介绍
m0_52900946的博客
04-18 3万+
1、什么是Grid布局 ​     Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。 2、和flex布局的区别 ​     Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。 flex布局示
Grid布局简单上手
开发要有产品的思维
01-14 2042
grid布局，新手上路
Android布局总结一:GridLayout布局(网格布局)
lixpjita39的专栏
07-18 8万+
GridLayout布局简介GridLayout布局是Android4.0（API Level 14）新引入的网格矩阵形式的布局控件。GridLayout属性介绍本身属性 android:alignmentMode 说明：当设置alignMargins，使视图的外边界之间进行校准。可以取以下值： alignBounds – 对齐子视图边界。 alignMargins – 对齐子视距内容。 an
设计APP有哪几种页面布局
04-05
3. 网格布局（Grid Layout）：按照网格的形式排列控件，可以设置每一格的大小和位置。 4. 表格布局（Table Layout）：按照表格的形式排列控件，可以设置每一格的大小和位置。 5. 绝对布局（Absolute Layout）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值