display:grid 布局实现两行两列

display:grid 布局实现两行两列，如图效果：

下面展示一些 内联代码片。

// A code block
div容器部分

// An highlighted block<div class="hourMan"><div class=" hourDiv" v-for="item,i in tableData" :key="i"><div class="flex-div hourCon"><div class="img">{{item.img}}</div><div class="right"><div class="flex-div "><div class="name">{{item.name}}</div><div v-for="it,t in item.icon" :key="t"><div class="tit">{{it.tit}}</div></div></div><div class="turnover">{{item.turnover}}</div></div></div></div></div>

下面展示一些 内联代码片。

// A code block
css部分

// An highlighted block
.hourMan{display: grid;grid-template-columns: 1fr 1fr;//有几列grid-template-rows: 1fr 1fr;//有几行 grid-gap: 20px;height: 80%;.hourDiv{background: rgba(255,255,255,0.1);padding: 20px;}}

本来想偷懒直接简写，发现几列和几行必须要分开写不能这样简写
下面展示一些 内联代码片。

// An highlighted block
grid-template: 1fr 1fr/1fr 1fr;//这样写浏览器不认

display:grid 布局实现两行两列相关推荐

SQL 两行两列显示一行四列或一行两列
前言两行两列显示一行四列 id A B 1 aaa bbb 1 ccc ddd ==>转化为 id A B A B 1 aaa bbb ccc ddd SQL 一对多转为一对一解决方法一 ...
HTML创建一个两行两列的表格,HTML tr 标签
定义和用法标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. 实例一个简单的 HTML 表格,包含两行两列: Month Savings January $100 ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
两列布局 html5,CSS两列布局的N种实现
原理:两个元素都设置dislpay:inline-block,为了消除html空格的影响,父元素的font-size需要设置为0,右侧自适应元素的宽度使用calc函数计算.如果两个元素的高度不一样,可 ...
android 菜单一行两列,Android RadioGroup 横向显示（两行两列）
做的android平板项目中,需要做一个调查问卷的界面,所以需要使用radiogroup的单选按钮,在listview的一个item上添加四个radiobutton,具体的demo是参考这位博主的,链 ...
HTML实现两行两列单元表
这里是小编学习HTML时候老师布置的一个作业: 我们接下来看一下对应实现的源码: <!DOCTYPE html> <html lang="en"> < ...
两列自适应布局的4种思路
前面的话前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 ...
任意列+左右两列等高布局，并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
div+css经典三行两列布局
写在前面在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

display:grid 布局实现两行两列

display:grid 布局实现两行两列相关推荐

最新文章

热门文章