首页 > 其他分享 >CSS Grid布局

CSS Grid布局

时间:2022-12-08 14:12:56浏览次数:40  
标签:container column 布局 start grid 10px Grid CSS row

Grid局部,当该容器的元素,需要成行成列的排列时,适合使用Grid

有两种设置:

.grid-container {
  display: grid;
}

.grid-container {
  display: inline-grid;
}

 

 

 

 gap = row-gap+column-gap

一、在外部容器上面,定义行和列

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

 

 .grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

 

 但所有列的宽度之和不足整个Grid,可以决定每一列的位置

.grid-container {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

 

 所有行的高度不足整个Grid的高度,可以排列行的位置

.grid-container {
display: grid;
height: 400px;
align-content: space-between;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

 

 

 二、在内部元素上面,定义位置

grid-column: start column / end column +1

grid-row: start row / end row + 1

注意,可以设置span,推断出终止的行号和列号

grid-column: start column /span count

grid-row: start row / span count

简略写法:

grid-area: start column / end column / start row / end row

 

还有一种,结合命名,使用

.item1 {
grid-area: myArea;
}

.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

 

标签:container,column,布局,start,grid,10px,Grid,CSS,row
From: https://www.cnblogs.com/chenyingzuo/p/16965915.html

相关文章

  • 一个简单的瀑布流布局的实现
    (实现了瀑布流功能,但是不能添加头部和底部视图,如项目中有添加头部或底部视图的需求,请自行修改)实现思路collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie......
  • DataGridView 显示行数
    privatevoiddataGridView_RowPostPaint(objectsender,DataGridViewRowPostPaintEventArgse){try{DataGridVie......
  • 三篇不错的介绍CSS GRID的文章
    三篇不错的介绍CSSGRID的文章:​​​http://www.css88.com/archives/8506​​​http://www.css88.com/archives/8512http://www.css88.com/archive......
  • C# WINFORM之DATAGRIDVIEW的 UI 美化——多选问题
    1.通过控件方式,添加操作列选中DataGridview控件,进行如图操作2.通过代码,添加操作列    DataGridViewColumncheckCol=newDataGridViewCheckBoxColumn();  ......
  • CSS Flex布局
    Flex布局单行多元素,可以考虑Flex布局,好处是居中、对齐比较好控制容器布局,决定使用Flex,横向(rowrow-reverse)还是纵向排列(columncolumn-reverse),是否折行(flex-wrap,......
  • 010.绘制后台首页UI布局
    1.index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>慕课网办公OA系统</title><!--引入样式--><linkrel="style......
  • CSS Margin中5个经典布局解决方案,重难点知识,记得收藏复习
    前几天我在面试前端开发同学的时候,有问到关于margin基础布局相关内容的过程中,发现很多同学基本解释不清楚,今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常......
  • css: button
     input[type="button"],input[type="submit"], button, .button{ border-radius:15px15px15px15px; background:#f3e8e6;/*Oldbrowsers*/ background:......
  • CSS3旋转流动的彩色边框特效
     效果图如图所示:  <divclass='box'>你好</div><stylelang='scss'>.box{position:relative;border-radius:10px;......
  • css 过滤 灰色
    <style>  html{filter:grayscale(1);}</style>原色:使用 filter:grayscale(1);后:......