gpt4 book ai didi

html - 单独覆盖 CSS 网格模板列

转载 作者:太空宇宙 更新时间:2023-11-04 15:43:40 25 4
gpt4 key购买 nike

我正在尝试创建两个按钮,每个按钮在使用 CSS 时切换特定的列 grid .

  • 我有一个简单的网格,可以切换第一列和最后一列的宽度。 (查看片段)

  • 我希望能够独立地切换列宽(无需进一步的 javascript)

  • 因为 active类应用于容器,每一列都无法推断另一列的事件状态。

  • 使用 flex,active 类将直接应用到列(例如 item1),这不是问题。

问题

是否有可以应用于列的 CSS 网格列宽属性(例如 item1 ) 覆盖 grid-template-columns 中的设置?

是否有类似grid-template-columns 的CSS 网格属性?可以定位单个列而不是一个属性中的所有列?

$("#js-btn-left").on("click", function () {
$(".grid-container").toggleClass("active");
});
$("#js-btn-right").on("click", function () {
$(".grid-container").toggleClass("active");
});
.grid-container {
display: grid;
grid-template-columns: 50px auto 50px;
grid-gap: 10px;
}

.grid-container > div {
background-color: #b00;
border:2px solid #000;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.grid-container.active{
grid-template-columns: 100px auto 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-left" type="button" value="TOGGLE COLUMN 1"/>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN 3"/>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>

最佳答案

使用 CSS 变量定义列,然后简单地调整变量:

$("#js-btn-left").on("click", function () {
$(".grid-container").toggleClass("active1");
});
$("#js-btn-right").on("click", function () {
$(".grid-container").toggleClass("active3");
});
.grid-container {
display: grid;
grid-template-columns: var(--c1,50px) auto var(--c3,50px);
grid-gap: 10px;
}

.grid-container > div {
background-color: #b00;
border:2px solid #000;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.grid-container.active1{
--c1:100px;
}
.grid-container.active3{
--c3:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-left" type="button" value="TOGGLE COLUMN 1"/>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN 3"/>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>

另一种 hacky 方法是依赖隐式网格并调整 grid-auto-column

$("#js-btn-right").on("click", function () {
$(".grid-container").toggleClass("active");
});
.grid-container {
display: grid;
grid-template-columns: auto ; /* only one column on the explicit grid */
grid-auto-flow:column; /*Make the flow column*/
grid-auto-columns:50px;
grid-gap: 10px;
}

.item1 {
/* Make the item1 at the left of the explicit grid
to undestand how it works:
https://stackoverflow.com/a/57750033/8620333 */
grid-column: random -1;
}
.grid-container.active{
grid-auto-columns:100px;
}



.grid-container > div {
background-color: #b00;
border:2px solid #000;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN"/>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>

如果您只想定位一列:

$("#js-btn-right").on("click", function () {
$(".grid-container").toggleClass("active");
});
.grid-container {
display: grid;
grid-template-columns: 50px auto ;
grid-auto-flow:column;
grid-auto-columns:50px;
grid-gap: 10px;
}

.grid-container.active{
grid-auto-columns:100px;
}



.grid-container > div {
background-color: #b00;
border:2px solid #000;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN"/>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>


或者您可以简单地更改每个元素应占用的列数,而不是更改列宽:

$("#js-btn-left").on("click", function () {
$(".grid-container").toggleClass("active1");
});
$("#js-btn-right").on("click", function () {
$(".grid-container").toggleClass("active3");
});
.grid-container {
display: grid;
grid-template-columns: 50px 40px auto 40px 50px; /* 40px because we have 10px of gap so the total will be 100px */
grid-gap: 10px;
}

.grid-container > div {
background-color: #b00;
border:2px solid #000;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item2 {
grid-column:span 3;
}
.grid-container.active3 .item3,
.grid-container.active3 .item2,
.grid-container.active1 .item1,
.grid-container.active1 .item2{
grid-column:span 2;
}

.grid-container.active1.active3 .item2{
grid-column:initial;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="js-btn-left" type="button" value="TOGGLE COLUMN 1"/>
<input id="js-btn-right" type="button" value="TOGGLE COLUMN 3"/>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>

关于html - 单独覆盖 CSS 网格模板列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58237805/

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