css网格布局的用法

最新推荐文章于 2023-08-21 10:08:18 发布
最新推荐文章于 2023-08-21 10:08:18 发布
阅读量173 收藏
点赞数
分类专栏： css 文章标签： css html 前端
本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。
本文链接：https://blog.csdn.net/weixin_49471755/article/details/131064269
版权
本文介绍了CSSGrid布局的关键属性，如grid-template-columns用于定义列，grid-gap设定网格间距，grid-row和grid-column控制元素的跨行和跨列，以及grid-area用于命名和定位网格区域。通过示例代码展示了这些属性如何影响网格布局。
摘要由CSDN通过智能技术生成

 /* 有几个auto 就有几个值，还可以设置成px */

grid-template-columns: auto auto auto auto auto;

/*

        网格之间的空隙为10px

        是grid-row-gap 行空隙 和 grid-column-gap: 列空隙 的简写

 */

 grid-gap: 10px; 

<style type="text/css">
	.grid-container {
		display: grid;
		grid-template-columns: auto auto auto auto auto;
		/* 有几个auto 就有几个值，还可以设置成px */
		grid-gap: 10px;
		/* 网格之间的空隙为10px
			是grid-row-gap 行空隙 和 grid-column-gap: 列空隙 的简写
		 */
		background-color: darkgray;
		padding: 10px;
	}
	.grid-container > div {
	  background-color: rgba(255, 255, 255, 0.8);
	  border: 1px solid rgba(0, 0, 0, 0.8);
	  padding: 20px;
	  font-size: 30px;
	  text-align: center;
	}
</style>
<div class="grid-container">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
	<div class="item5">5</div>
	<div class="item6">6</div>
	<div class="item7">7</div>
	<div class="item8">8</div>
	<div class="item9">9</div>
	<div class="item10">10</div>
</div>

 

 

/* 

        grid-row: 1 / 4;        //与下边相同， span 省略了

*/

/* grid-row-start 和grid-row-end 的简写属性 */

        grid-row: 1 / span 3;

/* span 表示跨越几行 */

/*

        grid-column: 1 / 3;    //与下边相同， span 省略了

*/

/* grid-column-start 和 grid-column-end 的简写属性 */

        grid-column: 1 / span 2;

/* span 表示跨越几列 */

    <style type="text/css">
		.grid-container {
			display: grid;
			grid-template-columns: auto auto auto auto auto;
			/* 有几个auto 就有几个值，还可以设置成px */


			/*grid-template-rows: 80px 200px;*/
			/* 有两行 不同的高度 */


			grid-gap: 10px;
			/* 网格之间的空隙为10px
				是grid-row-gap 行空隙 和 grid-column-gap: 列空隙 的简写
			 */
			background-color: darkgray;
			padding: 10px;
		}
		.grid-container > div {
		  background-color: rgba(255, 255, 255, 0.8);
		  border: 1px solid rgba(0, 0, 0, 0.8);
		  padding: 20px;
		  font-size: 30px;
		  text-align: center;
		}
		.item1 {
			/*grid-row: 1 / 4;*/
			/* grid-row-start 和grid-row-end 的简写属性 */
			grid-row: 1 / span 3;
			/* span 表示跨越几行 */


			/*grid-column: 1 / 3;*/
			/* grid-column-start 和 grid-column-end 的简写属性 */
			grid-column: 1 / span 2;
			/* span 表示跨越几列 */
		}
	</style>
    <div class="grid-container">
	    <div class="item1">1</div>
	    <div class="item2">2</div>
	    <div class="item3">3</div>
	    <div class="item4">4</div>
	    <div class="item5">5</div>
	    <div class="item6">6</div>
	    <div class="item7">7</div>
	    <div class="item8">8</div>
	    <div class="item9">9</div>
    	<div class="item10">10</div>
    </div>

 

您可使用 grid-area 属性来命名网格项目。

通过在网格容器上使用 grid-template-areas属性，您可以在设置网格布局时引用该名称。

此网格布局包含六列三行：

<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
<body>

<h1>grid-area 属性</h1>

<p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>

<p>通过在网格容器上使用 <em>grid-template-areas</em>属性，您可以在设置网格布局时引用该名称。</p>

<p>此网格布局包含六列三行：</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>

 

grid-area 的简写使用

grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item8 {
  /*grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。*/
  grid-area: 1 / 2 / 5 / 6;

  /*使 "item8" 从 row-line 1 和 column-line 2 开始，在 row-line 5 和 column line 6 结束：*/

}

/*.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}*/
/*使 "item8" 从 row-line 2 和 column-line 开始，并跨越 2 行和 3 列：*/

</style>

<body>

<h1>grid-area 属性</h1>

<p>您可以使用 <em>grid-area</em> 属性来规定在何处放置项目。</p>

<p>语法是：</p>

<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 将在 row-line 1 和 column-line 2 开始，并在 row-line 5 column-line 6 结束：</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>

布局位置： 

      justify-content: center;

      /*justify-content: start;

      justify-content: end;

      justify-content: space-around;

      justify-content: space-between;

      justify-content: space-evenly;

*/

      /*----------------------------------------*/

      align-content: center;

      /*align-content: space-around;

      align-content: space-between;

      align-content: space-evenly;

      align-content: end;

      align-content: start;*/

    <style type="text/css">
		.grid-container {
			display: grid;
			height: 400px;
			border: 1px solid red;
			/* 网格的总高度必须小于容器的高度，这样 align-content 属性才能生效。 */
			justify-content: center;
			/*justify-content: start;
			justify-content: end;
			justify-content: space-around;
			justify-content: space-between;
			justify-content: space-evenly;
*/
			/*----------------------------------------*/
			align-content: center;
			/*align-content: space-around;
			align-content: space-between;
			align-content: space-evenly;
			align-content: end;
			align-content: start;*/
		}
		.grid-container div {
			border: 1px solid #331212;
		}
	</style>
<body>
<div class="grid-container">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
	<div class="item5">5</div>
	<div class="item6">6</div>
	<div class="item7">7</div>
	<div class="item8">8</div>
	<div class="item9">9</div>
	<div class="item10">10</div>
</div>
</body>

over!!!!!!!!!!!!!!!!!!!! 

熙哥_tito
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10.介绍一下CSS中的Grid网格布局?
kleinBlue.的博客
11-07 762
一、是什么 Grid布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法 <divclass="container"> <divclass="itemitem-1"> ...
CSS网格布局：使用线框实现“网格区域”
02-21
在本主题中，我们将深入探讨如何利用CSS网格布局中的线框（Grid Lines）来实现“网格区域”，这将帮助我们更好地理解和控制网格的结构。 首先，我们需要理解CSS网格布局的基础概念。一个网格容器是包含一系列网格...
css 栅格布局
qq_42033430的博客
06-14 1009
间隙 线控制元素位置 给线取名 定义跨度 通过区域控制位置 给区域取别名 区域命名简写 对齐方式 终于搞清楚这三者区别 justify-content, justify-items, justify-self; 加固了 -content, -items 之间的用法;方法 1: 方法 2: 高级使用 通过封装响应的类, 直接通过写类名来实现所有的布局 类名取名的方式采用, 属性-值的形式, 方便阅读 同样是实现上面的例子 封装的 scss 总结 grid-row-end 可以比较方便的
CSS布局---运用间隙
qq_40619809的博客
07-11 6263
CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使用。由于CSS属性较多，且实际运用比我们看起来更复杂，这让我想同大家分享一下今天的主题---运用间隙。
css初入门：网页布局之网格布局-grid
lalala_dxf的博客
04-25 5023
网格列（Grid Columns）网格行（Grid Rows）网格间隙（Grid Gaps）通过以下属性来调整网格间隙。// 竖直间隙// 水平间隙// 是 row-gap 和column-gap 属性的简写属性列线与竖线列之间的线称为列线（column lines）。行之间的线称为行线（row lines）。
Flex布局和gird布局
weixin_43416349的博客
05-10 343
Flex布局只需要记住四个属性{
CSS网格布局幻灯片效果
06-06
CSS网格布局允许我们更加灵活地控制网页元素的排列，使得创建复杂的布局结构变得简单易行。 **CSS3网格布局** CSS3网格布局系统是一种二维布局模型，它将容器划分为行和列的网格，然后将内容分配到这些网格单元格中...
使用CSS网格布局放置元素的七种方法
01-20
本文将深入探讨使用CSS Grid放置元素的七种方法，帮助开发者更好地理解和应用这一布局系统。 1. 在个别属性中指定所有内容 这是最基础的布局方式，通过`grid-column-start`, `grid-column-end`, `grid-row-start`,...
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局相比，网格布局提供了更高的灵活性和控制能力。 在CSS Grid布局中，当一个容器元素声明为grid时，容器内的所有子元素会自动成为网格项（grid items）。如果...
css-网格布局-详情
08-01
CSS 网格布局（Grid Layout）是一种强大的二维布局系统，允许开发者轻松地创建复杂的、响应式的网页布局。相比于Flex布局，Grid布局更加适合处理二维布局的问题，因为它将容器划分为行和列，生成单元格，进而定位...
BootStrap栅格之间留出空隙
地推日记
08-29 2571
BootStrap栅格系统可以把我们的container容器划分为若干等分，如果想要每个部分之间留出一定的空隙，我们很可能首先想到的方法就是用margin外边距来使它们分离从而产生空隙，这样做真的的可以吗？ 【看个例子】： css样式： .row div { height: 100px; } html代码： <div class="container"> &lt
最强大的 CSS 布局 —— Grid 布局
u014645827的博客
07-19 2440
Grid布局相关的属性以及值众多，需要记忆的不少，建议可以跟demo一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小demo演示，建议大家可以自己修改看看效果加深记...
grid常用属性及属性值介绍
qq_39410252的博客
07-23 2538
本文章是使用的总结，以便于复习使用，如有错误希望指出。grid布局方式真的好用，无愧于是最强大的CSS布局方案。不适合无基础的人看，本文章更像是笔记。 提示以下是本篇文章正文内容，下面案例可供参考。...
【CSS Grid网格布局】常用属性，示例代码解读
花椒和蕊的博客
08-21 1000
grid-column-start/grid-column-end/grid-row-start/grid-row-end：用于定义单个网格元素的起始位置和结束位置。grid-template-columns/grid-template-rows：用于定义网格的列和行的大小和数量。grid-auto-columns/grid-auto-rows：用于定义没有显式指定大小的网格的列和行的大小。grid-column-gap/grid-row-gap：用于定义网格的列间距和行间距。
CSS基本样式
tianruine的博客
01-20 2058
1. font-famliy:引入字体，font-size:改变字体大小；font-weight设置字体粗细，值没有单位，只加数字 2. border-radius：是用来调整边角的圆润，50%就是圆形。 3. 可以拥有好几个class类，例如class=" pink-text blue-text"，如果两个类的样式冲突，在style中 下面的会覆盖上面的。 4. class类优先级高于继承，id选择器高于class选择器，内联样式高于id选择器。 5. ！import优先级最高 .pink-text {
响应式布局之grid网格布局，应该怎么用？
weixin_52583582的博客
12-10 861
二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上) <div class="container"> <div class="item"> <p>1</p> </div> <div class="item">2</div> <div class="item">3</div> <div class
10 个 web前端开发者必须要掌握的CSS 技巧
web前端开发
04-07 453
英文 |https://medium.com/@nasyxrakeeb2/10-css-pro-tips-code-this-not-that-codipher-f94558e82756翻译 | 杨小爱CSS 是每个 Web 开发人项目中的重要组成部分。对于没有设计和 UI 的 Web 开发人员来说，一切都是不可能的。因此，在使用 CSS 时保持高效非常重要。在本教程中...
面试官：介绍一下CSS中的Grid网格布局?
weixin_44475093的博客
04-12 507
一、是什么Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次...
Css 网格布局 grid
最新发布
11-22
CSS网格布局是一种二维布局系统，它可以让我们更方便地创建复杂的网页布局。下面是一个简单的例子： ```html <div class="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> <div class="item item-6">6</div> </div> ``` ```css .container { display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 100px 100px auto; grid-gap: 10px; } .item { background-color: #ddd; padding: 20px; font-size: 30px; text-align: center; } ``` 在这个例子中，我们创建了一个包含6个子元素的容器，并使用`display: grid`将其设置为网格布局。然后，我们使用`grid-template-columns`和`grid-template-rows`属性来定义网格的列和行。在这个例子中，我们定义了3列和3行，前两列和前两行的宽度和高度都是100像素，最后一列和最后一行的宽度和高度自适应。我们还使用`grid-gap`属性来定义网格之间的间距。 接下来，我们为每个子元素定义了一个类名，并使用`grid-column`和`grid-row`属性来指定它们在网格中的位置。在这个例子中，我们将第一个子元素放在第1列和第1行，跨越了2列；将第二个子元素放在第3列和第1行；将第三个子元素放在第1列和第3行；将第四个子元素放在第3列和第3行；将第五个子元素放在第2列和第2行，跨越了2行；将第六个子元素放在第2列和第3行。 这样，我们就创建了一个简单的网格布局。当然，CSS网格布局还有很多其他的属性和用法，可以用来创建更复杂的布局。如果您想深入了解CSS网格布局，请参考相关文档和教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值