gpt4 book ai didi

css - 如何通过 css 网格为元素提供两倍的空间?

转载 作者:行者123 更新时间:2023-11-28 16:49:22 25 4
gpt4 key购买 nike

我想把元素分成四个,但是我想让第一个元素占两倍的面积。我试图给元素一显示模板列 2fr 但它不起作用。

我怎样才能解决这个问题?

.container >div:nth-child(odd){   
background-color: rebeccapurple;
}
.container >div:nth-child(even){
background-color: red;
}
item{

}
.container{
display: grid;
grid-template-columns: 20% 20% 20% 20%;
grid-gap: 5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<title> NEW PRO </title>
</head>
<body>
<!--start-->
<div class="container">
<div class="item item1">
<h4>item1</h4>
</div>
<div class="item">
<h4>item2</h4>
</div>
<div class="item">
<h4>item3</h4>
</div>
<div class="item">
<h4>item4</h4>
</div>
</div>
<!--end-->
<script src="js/script.js">
</script>
</body>

最佳答案

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

如果您使用网格,您就是在计算“网格”,即行和列。把它想象成一个 excel 电子表格。列是垂直的。列线是每列之前、之后和之间的线。在您的代码中,您有五行。 1 个之前,3 个之间和 1 个之后。

在上面的代码中,你说你想从第 1 列开始,到第 3 列结束。这意味着你的元素的宽度将是你的情况的两倍。如果添加更多列,则需要更改网格列的结尾。

希望这能让事情变得清晰。

关于css - 如何通过 css 网格为元素提供两倍的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59583742/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com