display:grid 布局实现两行两列

最新推荐文章于 2024-03-22 11:44:59 发布

VIP文章小春春_xcc

最新推荐文章于 2024-03-22 11:44:59 发布

阅读量4.7k

点赞数 1

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/WMC_19931013/article/details/123545549

版权

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"

最低0.47元/天解锁文章

优惠劵

小春春_xcc

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
display:grid 布局实现两行两列

display:grid 布局
复制链接

扫一扫

专栏目录

display: flex弹性布局

10-12

display: flex弹性布局

CSS3中的display:grid，网格布局介绍

01-19

1.网格布局(grid): 　　　　　　　　它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局; 2.基本概念：　　　　　　　　容器和项目，如图所示： <div class=content> <div class=b>1</div> <div class=b>2</div> <div class=b>3</div> <div class=b>4</div> <div class=b>5</div> <div class=b>6</div>

参与评论您还未登录，请先登录后发表或查看评论

grid双行双列合并无法实现

最新发布

m0_73643786的博客

03-22

griditem包含一个column，column包含两行内容，之后griditem只要实现了列合并就行了。

css双列布局-grid

HAINIHAOya的博客

03-26

1838

css双列布局-grid 使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为容器。再给该容器添加"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。此时可以看到整个容器的高度因为首列的内容被撑开了，并且右边

display:table-cell实现兼容性的两栏自适应布局实现代码

09-25

display:table-cell实现兼容性的两栏自适应布局,需要的朋友可以参考下

CSS_布局(二维布局：grid)

骑大马挎大刀

02-10

351

grid布局：二维布局方式，可以同时控制行和列的排布和对齐方式。属性说明：开启grid布局：display: grid; 子元素浮动宽度：grid-template-columns: 1fr 2fr 1fr; 子元素固定宽度：grid-template-columns:100px 100px 100px; 列间距：column-gap: 20px; 行间距：row-gap: 15px; 统一设置行间距和列间距：gap:15px; 垂直方向居中对齐子元素(父级有宽和高)：align-items: cen

CSS Grid 布局指南

反正你猜不到我是谁

09-06

1275

说明在CSS当中，布局一直是一个非常重要的话题，在漫长的发展时间当中，出现了很多种布局方案，但是就整体来说主要分成解决PC端和移动端布局的两大类，在这两大类中包括例如传统的table布局，后期的display+float+position的布局方案，再比如CSS3中新增加的Flex布局和多列布局等等，而在本篇博文中，将会主要讲述一种比较新的布局方案Grid布局。正是因为Grid布局的年纪较小，所以从兼容性上来说，要逊色于Flex布局，但是从实际的开发效率上来讲，却是比Flex更加强大，这也是本篇博文的出

Grid布局

weixin_50945128的博客

01-24

792

Grid布局

最强大的 CSS 布局 —— Grid 布局

油墨香^-^的博客

03-30

914

grid布局

farmerXU的博客

11-04

149

默认情况下，容器元素都是块级元素(display: grid;)，但也可以设成行内元素(display: inline-grid;)。 grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; 上面定义了三行三列，列宽和行高都是100px。还可以使用百分比来写。 grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33

最强大的布局方案——网格Grid布局万字详解

郊眠寺

12-17

1万+

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。移动端浏览器：*) 从上图我们可以看出第一列的宽度为150px，第二列和第三列以1：2的比例均分了剩余空间) 如上图所示，第三列的宽度最小不小于10px，最大不超过50px。

用HTML实现一个动态的圣诞树

12-23

用HTML实现一个动态的圣诞树

CSS display:block在Firefox下显示布局错乱问题

09-25

本文向大家介绍一下如何解决CSS display:block在Firefox下显示布局错乱问题，按照常理，对于某一单元行需要显示时，使用CSS display:block属性，在IE浏览器中显示正常，但是当用Firefox浏览时却出现了布局错乱的问题...

XF Grid使用-两行两列-跟WPF不同

weixin_30617695的博客

08-05

178

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" ...

响应式的grid图片多行两列布局

qq_33960741的博客

01-13

1270

使用grid-template-columns:1fr1fr; 保证有两列图片，img标签的属性设置为 width:100%; height:auto; 则可以保证图片自适应放大缩小，如果想要让图片在过小宽度时改为一行一列，则可以使用grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );每列最小为100px，即一行的宽度小于200px时将会显示为一行一列 ...

【CSS】使用Flex做两行或两列布局

热门推荐

了解—学习—进步—满足

07-27

1万+

【CSS】使用Flex做两行或两列布局

一步步编写avalon组件04：GRID组件

weixin_34067102的博客

08-04

128

grid组件（表格）是非常常用的组件，尤其是后台系统。它的制定也是五花八门的。因此jQuery有大量的grid组件，每个都庞大无比，集成各种功能，复杂得像Excel。但即便是这样，我们的产品经理总是能提出一些需求，让你死去活来。因此有时我们不需要一个功能丰富的grid，而是一个扩展性极好的grid。 avalon2强大的组件机制就此而生。...

CSS进阶之grid网格布局 (三)：关于grid布局、grid-container属性、grid-items属性

Good Good Study,Day Day Up!

06-04

2582

css网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。1. 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局；2. Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

display:grid网格布局

hhupp1809684284的博客

05-26

7470

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。有时候，一些项目的指定位置，在现有网格的外部。grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

display:grid

05-20

`display: grid` 是 CSS 的一个属性，用于创建一个网格布局。它允许你将一个元素的子元素划分为行和列，并在这些行和列中放置内容。使用 `grid-template-rows` 和 `grid-template-columns` 可以定义网格的行和列，使用 `grid-template-areas` 可以定义每个单元格的名称，然后使用 `grid-area` 将元素放置到对应的单元格中。以下是一个简单的示例： ```html <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> ``` ```css .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "item1 item2" "item3 item4"; } .item1 { grid-area: item1; } .item2 { grid-area: item2; } .item3 { grid-area: item3; } .item4 { grid-area: item4; } ``` 这个例子创建了一个具有两行两列的网格布局，并将每个元素放置在相应的单元格中。`1fr` 意味着每一列和每一行都应该占用可用空间的相等份额。 `grid-template-areas` 允许我们将单元格命名为一个字符串，并将相应的元素放置到这些单元格中。在这个例子中，我们使用 `grid-area` 将每个元素放置到对应的单元格中。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交