如何创建模态图像的网格？
创建模态图像的网格可以通过以下步骤实现：
- 使用HTML和CSS创建网格容器：在HTML文件中创建一个容器元素，可以使用div标签，并为其添加一个唯一的ID或类名。然后，在CSS文件中使用该ID或类名选择器来定义容器的样式。设置容器的display属性为grid，这将使其成为一个网格容器。
示例代码：
HTML：
<div id="grid-container"></div>CSS：
#grid-container {
display: grid;
}- 定义网格的行和列：在CSS文件中，使用grid-template-rows和grid-template-columns属性来定义网格的行和列。可以使用像素、百分比或其他单位来设置行和列的大小。可以使用repeat()函数来定义重复的行和列。
示例代码：
#grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* 创建3行，每行高度为100像素 */
grid-template-columns: repeat(4, 1fr); /* 创建4列，每列宽度平均分配 */
}- 添加网格项：在网格容器中添加网格项，可以使用子元素或伪元素。可以使用grid-row和grid-column属性来指定网格项所占的行和列。
示例代码：
<div id="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>#grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(4, 1fr);
}
.grid-item {
background-color: #ccc;
border: 1px solid #000;
grid-row: 1 / 3; /* 网格项占据第1行到第3行 */
grid-column: 2 / 4; /* 网格项占据第2列到第4列 */
}以上代码将创建一个3行4列的网格容器，并在第1行到第3行、第2列到第4列的位置添加了一个网格项。
创建模态图像的网格可以根据具体需求进行调整和扩展。如果需要更复杂的布局，可以使用其他CSS属性和值来定义网格项的位置和大小。
相关·内容
我有这个网格布局。 nav和footer区域占据了第1列和第4列之间的整个空间。 header、main和aside仅占用第2列和第3列之间的空间。 ? header只会有一个徽标。然而，我设计了一个CMS和标志可能会设置，可能不是，取决于用户。默认情况下没有设置徽标，但是当没有设置徽标时，我应该如何处理网格中的空白header区域？ 请查看完整页面视图： :root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
pad
浏览 19提问于2020-06-25得票数 1
回答已采纳
我想建一个6x6的网格，只用3个元素填充所有的列和行。大小应该与36个单元格的大小相同，但3个单元格填满了所有空间。由于某些原因，我的单元格似乎没有填充它们各自的单元格和列。 我找到了span选项，尽管它似乎不能正常工作。 下面是我的代码： .grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-template-rows: auto auto auto auto auto auto;
background-color: #219
浏览 10提问于2020-03-25得票数 0
回答已采纳
你能解释一下这是怎么回事吗？(如果可能的话，可以将链接附加到CSS规范)
当我将#grid-container (flex: 1 0 auto)上的flex-收缩设置为时，会出现整个页面的滚动条。
但是，当我在#grid-container (flex: 1 1 auto)上将flex-收缩设置为1时，条形滚动条只出现在#网格容器中。
在下面的代码片段中，#grid-container上的伸缩设置为 (flex: 1 0 auto)。将其更改为1(flex: 1 1 auto)以查看差异
html {
height: 100%;
}
body {
display: flex;
浏览 0提问于2019-03-28得票数 5
回答已采纳
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.grid-item {
background: blue;
height: 100px;
}
.grid-item .item1 {
grid-row-start: 1;
grid-row-end: 3;
} <div class="grid-container">
<div class=&#
浏览 31提问于2021-09-14得票数 2
2回答
我有一个css网格，有2列和3行。第三行内容并不总是存在，因为有一个角ngif子句。图像出现在跨越这3行的第一列中。尽管如此，我在Chrome (80.0.3987.87，这是我发布的最新稳定版本)和Firefox中得到了两个不同的结果。
是否有一种方法可以控制行，使其行为类似于Firefox，即当图像高度大于第一行高度之和时，第三行就会增长。
.grid {
width:400px;
display:grid;
grid-template-columns: 40px 1fr;
grid-template-rows: minmax(0, auto) minmax(0, au
浏览 4提问于2020-02-05得票数 3
1回答
我试图使用CSS网格来调整我的图像大小。这是我的CSS代码：
/* General */
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
background-image: url("/assets/images/background.png");
background-repeat: repeat;
}
body {
height: 100%;
}
/* Grid */
.grid-container {
height: 100%;
display: grid;
浏览 4提问于2021-02-03得票数 0
回答已采纳
3回答
我想在标题上有一个打破网格的底部边框。有三列，左，中，右，我的标题和内容在中间。我想让底部的边框一直延伸到左列的左边。有没有比我想出的更好的方法来做这件事？CSS网格是否为完成此类工作提供了内置机制？如有任何建议，我将不胜感激。
.grid-container {
padding: 10px;
display: grid;
grid-template-columns: [start] 1fr [middle] 4fr [end] 1fr ;
grid-gap: 1rem;
background-color: #fff;
color: #444;
}
.
浏览 5提问于2017-12-15得票数 1
回答已采纳
1回答
我有一个2列布局，并希望将一行拆分为3列布局--如果不首先指定3列布局，这是可能的吗？
示例
在该行中，所有的7s都应该分成3部分(参见代码输出)。
1比1.5显然不起作用。
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30
浏览 3提问于2020-06-01得票数 2
回答已采纳
2回答
我有一个网格布局，假设2行，2列在第1行，3列在第2行。它们之间的栅格间距为10 of。给每个网格一个背景图像是没有问题的。但是，如果我希望它们都有相同的背景图像，从左上角网格开始，然后继续/被跨越，直到右下角网格。一个巨大的背景图像覆盖着所有的网格，只是被白色的栅格隔开。
html,
body {
height: 100%;
}
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-ga
浏览 0提问于2019-04-08得票数 2
回答已采纳
2回答
我试图在CSS Grid上创建一个高度为100%的页面，但当我将一个图像放入其容器并缩小窗口时，内容会垂直溢出到我的另一个容器上。它只发生在基于100vh的页面上。我努力尝试了网格规则，但什么都不起作用 有人有解决方案吗？ 我当前的代码：https://jsfiddle.net/kxaobqcr/3/ <header>
<div class="type"> <h1>Title</h1> </div>
<div class="nav">
<
浏览 28提问于2019-05-12得票数 0
回答已采纳
2回答
我目前的情况是，我有一个嵌套的div item2half，我想放在我的grid-container中的某个地方-问题是它在grid-container中的位置-我不能在grid-container中找到它，如果我对一个网格进行item-2，item2half会被放在grid-container网格中的item-2位置中。
html
<div class="grid-container">
<div class="item-1">1</div>
<div class="item-2">2
浏览 0提问于2019-07-16得票数 0
3回答
我有一个布局，是一个侧边栏和一个网格，两者都包装在一个flexbox中。我想在网格下面放一个div，这样它就可以有上一个/下一个按钮，就像this image中的那样，但是我不知道怎么做。网格会随着窗口调整自身的大小，这样网格就可以根据需要占用任意多的行，然后div应该位于该行的下方，并且与网格一样宽。 这就是我所拥有的，但是div在网格的右边： <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Board
浏览 25提问于2021-04-29得票数 1
1回答
我开始学习CSS网格。然而，如果我有12行12列的话，我试着研究如何选择这2行，并将其扩展到最后。在那几行中，我将放置一个导航链接。
body,
html {
padding: 0;
margin: 0;
background-color: #5DADE2;
height: 100%;
}
.mainbox {
display: grid;
margin: 10px 0;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
浏览 2提问于2018-10-14得票数 0
回答已采纳
1回答
我有一个CSS网格布局(8x4)。预览：
：
我有8科尔和4排。列使用1fr单元响应(全宽度)。
但我不能得到同样的行为行(需要4行全高)。我怎么才能拿到呢？
我的代码：
HTML：
<div class="grid">
<div id="item-1" class="item item-1">
<span>1</span>
</div>
<div id="item-2" class="item item-2">
浏览 0提问于2018-02-04得票数 0
回答已采纳
我试图使用CSS网格布局来模拟一些响应行为，特别是使用：
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
我的例子在Chrome中运行得很好，但是它在火狐中似乎不起作用。当您水平地调整浏览器的大小时，您会发现它。
另一个例子是，在Chrome和火狐中都运行得很好。
html,body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
body {
display: grid;
grid-template-columns: 1
浏览 0提问于2018-01-25得票数 5
回答已采纳
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px;
grid-auto-rows: 60px;
grid-gap: 15px;
}
.col {
background-color: tomato;
}
<div class="grid">
<div class="col"></div>
<div class="col"></div&
浏览 14提问于2017-12-03得票数 33
回答已采纳
2回答
我想在桌面上切换我的网格的第3和第4列。
我知道我可以为每一项分配网格顺序，或者为两个div使用自己的行，然后设置顺序，但是我想避免这两种情况，以减少代码。
有什么方法可以用css网格来实现这一点吗？我是开放的解决方案通过css-flex，如果这会更容易。
我的当前代码如下：
.row{
display: grid;
grid-template-columns: 1fr;
}
@media screen and (min-width: 1200px) {
.row{
grid-template-columns: 1fr 1fr
}
}
.row div{bord
浏览 3提问于2021-03-24得票数 2
回答已采纳
3回答
我有一个3×3的。
我有一排A，B & C三项。
我想要项目C的rowspan值为2。
为此，我使用grid-row: 1 / span 2;。它是两行，但它是放在第一列，而不是简单地躺在第三列。我不知道为什么会这样。
我想让C项停留在HTML中的位置。
解决这个问题的一个方法是显式设置grid-column: 3 / span 1，这是我不想做的。我希望项目被放在HTML中的方式。
有什么办法可以抑制这种行为吗？
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-t
浏览 7提问于2017-05-04得票数 3
回答已采纳
嘿，伙计们，我试着做这个任务，其中一个要求是，它使用CSS中的网格布局，所以我把页面的开头放在一起，试图让布局按照我想要的方式工作，而为了我的生活，我无法让这个页面按照我所需要的方式运行，这让我很想知道我做错了什么或者错过了什么。我看了那么多关于如何使用网格的指南和网站，我只是不知道我错过了什么。任何帮助都是非常感谢的，这是我的代码。编辑布局，我的目标是这样的东西。
HTML
<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
<meta name=
浏览 4提问于2020-12-09得票数 1
回答已采纳
我遇到过一个网格布局的例子，我不明白为什么向行和列添加网格间距会导致行项目溢出容器(我理解这一点)，而不是列项目；相反，容器可以扩展而不会溢出。
body {
padding: 20px;
}
.grid-container {
border: 5px solid black;
font-family: avenir, sans-serif;
font-weight: bold;
display: grid;
grid-template-columns: repeat(4, 25%);
grid-template-rows: 100px 100px;
ga
浏览 0提问于2021-05-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
