CSS Gird布局用法

最新推荐文章于 2024-08-01 16:10:45 发布
最新推荐文章于 2024-08-01 16:10:45 发布
阅读量788 收藏
点赞数
分类专栏： CSS 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43876728/article/details/119296174
版权

容器属性

  1. grid-template-columns 列

  2. grid-template-rows 行

  3. row-gap 行间距

  4. grid-auto-flow 排列方向 默认row行

  5. 排列排版 justify-content 水平 align-content垂直

  6. 设置多余的设置大小 grid-auto

  7. 容器属性 一个区域由单个或多个组成grid-template-areas

列grid-template-columns

  • grid-template-columns: 100px 100px; 左右均100px

  • grid-template-columns: 1fr 1fr ; 左右均等分 等于 grid-template-columns: repeat(2, 1fr)

  • grid-template-columns: 1fr minmax(150px, 1fr) 第二个最小宽度设置150px

  • grid-template-columns: 100px auto 100px; auto 自动获取剩下的 左右均100

  • 网格线 grid-template-columns: [c1] 100px [c2] 100px [c3]100px [c4];

行grid-template-rows

  • grid-template-rows: 100px 100px 100px 100px; 不设置默认均分铺满

间距 row-gap

  • row-gap: 20px; 行与列均20px

  • 合并 两个属性行 ，列 。 一个都一样 gap: 20px 40px;

grid-auto-flow 排序顺序方向

  • grid-auto-flow: row; 默认横线排列

  • grid-auto-flow: column; 竖向排列

  • grid-auto-flow: row dense; 空间利用

排列排版 justify-content 水平 align-content垂直

  • start 最左

  • end 最右

  • center 中间

  • stretch 拉伸

  • space-around 向内分布

  • space-between 向外分布

  • space-evenly 均匀排列每个元素, 每个元素之间的间隔相等

设置多余的设置大小 grid-auto

  • grid-auto-rows: 50px;

  • grid-auto-columns: 50px;

容器属性 一个区域由单个或多个组成grid-template-areas

grid-template-areas: 'a b c'
        'd e f'
        'g h i';

项目属性

  1. 从哪里开始到哪列结束 行 grid-row 列grid-column

  2. 区域 grid-area

  3. 设置自身对齐 justify-self 行 列 align-self

从哪里开始到哪列结束 行 grid-row 列grid-column

/* grid-column-start: 1;
 grid-column-end: 3; */
 /* 简写 */
 /* grid-column: 1/3; */
 /* 跨越 */
 /* grid-column-start: span 2; */
 /* 横线  */
 /* grid-row-start: 1;
 grid-row-end: 3; */

区域 grid-area

  grid-area: a; 对应grid-template-areas

设置自身对齐 justify-self 行 列 align-self

/* justify-self:  start | end|center|stretch; */
/* 竖向  */
/* align-self: start | end|center|stretch; */
/* 简写 place-self; */
<body>
    <div class="main">
        <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 class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <!-- <div class="item item-10">10</div> -->
    </div>
</body>
​
.main {
    width: 600px;
    height: 600px;
    border: 10px solid black;
    /* 容器属性 */
    display: grid;
    /* 不设置默认铺满，每列独占一行 */
    /* grid-template-columns: 100px 100px; */
    /* 平均等分 等于 grid-template-columns: 1fr 1fr 1fr; */
    /* grid-template-columns: repeat(3, 1fr); */
    /* 第二个最小宽度设置150px */
    /* grid-template-columns: 1fr minmax(150px, 1fr); */
    /* auto 自动获取剩下的 */
    grid-template-columns: 100px auto 100px;
    /* 网格线 */
    grid-template-columns: [c1] 100px [c2] 100px [c3]100px [c4];
    /* 不设置默认均分铺满 */
    /* grid-template-rows: 100px 100px 100px 100px; */
    /* 行间距 */
    /* row-gap: 20px; */
    /* 列间距 */
    /* column-gap: 20px; */
    /* 合并 两个属性行 ，列   一个则都一样*/
    /* gap: 20px 40px; */
    /* 默认横线排列 */
    /* grid-auto-flow: row; */
    /* 竖向排列 */
    /* grid-auto-flow: column; */
    /* 空间利用 */
    /* grid-auto-flow: row dense;  */
​
    /* 水平方向 justify-content 
    垂直方向 align-content
        start 最左
        end 最右
        center 中间 
        stretch 拉伸
        space-around 向内分布
        space-between 向外分布
        space-evenly 均匀排列每个元素,
        每个元素之间的间隔相等
    */
    /* justify-content: space-evenly; */
    /* 设置多余的设置大小    */
    grid-auto-rows: 50px;
    grid-auto-columns: 50px;
    /* 容器属性 一个区域由单个或多个组成 */
    grid-template-areas: 'a b c'
        'd e f'
        'g h i';
}
.item {
    font-size: 50px;
    background: yellowgreen;
    color: #fff;
}
.item-1 {
    /* 从哪里开始到哪列结束 */
    background: #e91e6e;
    /* 竖向 */
    /* grid-column-start: 1;
    grid-column-end: 3; */
    /* 简写 */
    /* grid-column: 1/3; */
    /* 跨越 */
    /* grid-column-start: span 2; */
    /* 横线  */
    /* grid-row-start: 1;
    grid-row-end: 3; */
​
}
​
.item-2 {
    background: #5df58b;
    /* 区域 */
    grid-area: a;
​
    /* 设置自身对齐 */
    /* justify-self:  start | end|center|stretch; */
    /* 竖向  */
    /* align-self: start | end|center|stretch; */
    /* 简写 place-self; */
}
​
.item-3 {
    background: #5d1350;
}
.item-4 {
    background: #5d1906;
}
.item-5 {
    background: #5df3de;
}
.item-6 {
    background: #5d4766;
}
.item-7 {
    background: #5d2dd1;
}
.item-8 {
    background: #94b784;
}
.item-9 {
    background: #ff370a;
}
.item10 {
    background: #ffa225;
}

代码


                

        

        

    

  


    

      

        

            

              
                
                  前端-小鑫
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
了解 CSS 中的网格模板列

				
			

			

				

					分享身边生活经验blog
				

				

					09-15
					
					683
					
				

			

		

		

			
				
简单的说， grid-template-columns是一个属性，如何修复“未找到对话”ChatGPT 错误指定网格布局中的列数以及所述列的宽度。该属性的值由空格分隔，每个值指定其各自列的大小：上面的行是如何使用的基本演示 grid-template-columns。他们三个 auto分隔的值表示具有相同宽度的三列。以下两个也同样适用 auto价值观。如何解决“此帐户不允许使用 WhatsApp”的问题至于四个 20%值时，列的宽度将为父元素的 20%。

			
		

	



                

              
                



	

		

			

				
					
Css Gird网格布局详细介绍

				
			

			

				

					qq_35403762的博客
				

				

					03-01
					
					466
					
				

			

		

		

			
				
Css Gird网格布局
CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module，我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS中的网格...

			
		

	



                


  
              

                


	

		

			

				
					
css布局grid-template-columns属性

				
			

			

				

					m0_74265396的博客
				

				

					11-06
					
					917
					
				

			

		

		

			
				
将创建一个有三列的网格，其中第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。” 将创建一个有6列的网格，其中每个重复的模式包含1个1fr列和1个2fr列。第一列和第三列的宽度为可用空间的1/3，第二列的宽度为可用空间的2/3。总之， grid-template-columns 属性是用于定义网格列数量和大小的非常有用的属性，在创建具有复杂布局的网站时非常有用。您还可以将 grid-template-columns 属性设置为 auto，表示列的大小将根据内容自动调整。

			
		

	





	

		

			

				
					
Css布局 Grid布局

					
最新发布

				
			

			

				

					qq_54855933的博客
				

				

					08-01
					
					1057
					
				

			

		

		

			
				
grid-template-areas 的属性值是一个或多个由空格分隔的字符串，每个字符串代表网格布局中的一行。函数 ：minmax(最小值，最大值) 函数允许你同时设置列（或行）的最小值和最大值。会创建两列，第一列长度为1fr，第二列的宽度至少为 100px，且不超过1fr。Grid布局，即网格布局，通过将容器划分为"行"和"列"来创建网格，然后将内容放置在网格的单元格中，咱们可以简单理解为二维布局。定义了网格线与网格项之间的间隙（grid-row-gap 和 grid-column-gap 的简写）。

			
		

	



		

			
		



	

		

			

				
					
阮一峰老师 CSS Grid 网格布局教程(转载)

					
热门推荐

				
			

			

				

					鸭绒的博客
				

				

					09-30
					
					3万+
					
				

			

		

		

			
				
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。


                                <!-- div class="asset-body" -->
                                    <h2>一、概述</h2>

网格布局（Grid）是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.

			
		

	





	

		

			

				
					
2种方式调整GridLayout布局的某一列宽度，使其撑满剩余空间。

				
			

			

				

					大路的博客
				

				

					06-04
					
					3万+
					
				

			

		

		

			
				
使用GridLayout布局，可以方便的实现对齐效果。有时候我们放置了好几列，如果屏幕还没有撑满，那么就想用某一列撑满剩余的空间。撑满剩余空间有2种方式。分别是使用layout_gravity也layout_columnWeight属性。...

			
		

	





	

		

			

				
					
css：grid布局子元素被撑开导致没有按比例均分

				
			

			

				

					彭世瑜的博客
				

				

					09-20
					
					5073
					
				

			

		

		

			
				
不过，出现了一个问题，当其中一个元素内部的宽度比较大时，会出现不均分的现象。使用grid布局使得左右两边的元素均分，实现效果。/* 方式一： *//* 方式二： *//* 方式三： */

			
		

	





	

		

			

				
					
CSS Gird布局教程指南

				
			

			

				

					12-13
				

			

		

		

			
				
CSS Grid布局是现代Web开发中一个强大的二维布局系统，它为设计复杂的网页界面提供了更为直观和灵活的方法。在过去的几年里，CSS布局方法经历了从表格布局、浮动元素、定位和inline-block等技术到Flexbox的一维布局...

			
		

	





	

		

			

				
					
3 分钟上手 CSS Grid 布局

				
			

			

				

					小青蛙的博客
				

				

					06-04
					
					454
					
				

			

		

		

			
				
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid (网格) 布局。
基础知识
截至2017年3月，许多浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome（包括 Android ），Firefox，.

			
		

	





	

		

			

				
					
CSS常见的布局方式

				
			

			

				

					BYGFJ的博客
				

				

					11-26
					
					2934
					
				

			

		

		

			
				
CSS中常见布局方式有哪些？下面本篇文章就来给大家介绍一下CSS中的常见布局方式，希望对大家有所帮助。

在介绍CSS布局方式之前我先简单说明一下html中的三种布局方式：

流动布局（默认）
	浮动布局（float）
	定位布局（position）
好了，这里就不详细介绍这三种布局了，今天我们的重头戏是探索CSS中常见的布局方式有哪些？



一、单列布局

常见的单列布局有两种：

header,content 和 footer 等宽的单列布局
	header 与 footer 等宽,content .

			
		

	





	

		

			

				
					
CSS3 grid layout（网格布局）（五）

				
			

			

				

					Vollerei的博客
				

				

					01-09
					
					723
					
				

			

		

		

			
				
让我们接着来看网格布局
七、有关显式网格和隐式网格
在之前例子中，我们使用 grid-template-columns 和 grid-template-rows  来构建我们的网格。根据我们对这俩个属性的设置所划分出来的区域就是 显式网格。当网格元素的数量多于由我们自己设置的列轨道和行轨道划分出的区域数量时，网格容器就会 自动生成 具有 默认宽度或者高度 的的行轨道和列轨道，这些由网格容器自动生成...

			
		

	





	

		

			

				
					
grid网格布局

				
			

			

				

					止水Itachi
				

				

					03-26
					
					367
					
				

			

		

		

			
				
网格布局设置:
			display:;
				grid
				inline-grid

容器(父元素):
			划分行:
			grid-template-rows:;
				px 
				%
				fr
				重复: repeat(行数,均分fr)
				
			划分列:
			grid-template-columns:;
				px 
				%
				fr
				重复...

			
		

	





	

		

			

				
					
css.grid布局

				
			

			

				

					qq_35146107的博客
				

				

					09-18
					
					460
					
				

			

		

		

			
				
flex布局是轴线布局，只能指定“项目：针对轴线的位置，可以看作是一维布局，grid布局则是将容器划分成“行”和”列“，然后指定”项目所在“的单元格，可以看作是二维布局，grid布局比flex布局更加强大。grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4]  定义列网格线的名称grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4]         定义行的网格线名称。

			
		

	





	

		

			

				
					
CSS 网格

				
			

			

				

					chen_0804的博客
				

				

					05-28
					
					171
					
				

			

		

		

			
				
一、display:grid
1、grid-template-columns
grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。
<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}


			
		

	





	

		

			

				
					
CSS - 网格布局（grid）

				
			

			

				

					程序员阿甘的博客
				

				

					07-20
					
					6975
					
				

			

		

		

			
				
网格布局、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 网格 Gird 布局

				
			

			

				

					qq_43505867的博客
				

				

					09-21
					
					589
					
				

			

		

		

			
				
通过将属性display的值设为grid，HTML 元素就可以变为网格容器。在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。

			
		

	





	

		

			

				
					
css grid 自动高度_CSS Grid布局：理解CSS Grid中自动排列的算法

				
			

			

				

					weixin_39776991的博客
				

				

					01-17
					
					226
					
				

			

		

		

			
				
在这个系列教程中的《列和间距》一文中了解到了在CSS Grid布局中如何实现流体网格列和列间距。也了解到了没有必要指定网格项目具体的值就可以实现网格项目的排列位置。如果显式声明网格属性，网格项目根据自动排列算法，会使网格排列变得更糟糕。在这篇文章中我们将看看这个算法是如何影响网格项目的位置排列。配置如果你的浏览器不支持CSS Grid，那么你可以先阅读系列中第一篇文章《快速入门》。开始制作一个网格...

			
		

	





	

		

			

				
					
css盒子宽度自动补齐剩余距离

				
			

			

				

					weixin_65825664的博客
				

				

					07-23
					
					1421
					
				

			

		

		

			
				
要实现CSS盒子宽度自动填充剩余距离，可以使用flex布局中的flex-grow属性或者grid布局中的fractional unit（fr）单位。这两种方法都可以实现盒子宽度自动填充剩余距离，具体选择哪种方法取决于你的布局需求和兼容性要求。是要填充剩余宽度的盒子。元素都会自动填充剩下的宽度。将会自动填充剩余的宽度。是包含盒子的父元素，通过。单位表示剩余的空间。属性设置列的宽度，使用。是包含盒子的父元素，

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值