主页 / 问题 / 1000883
Accepted
Frenc Olesov
Asked:2020-07-09 15:31:05 +0000 UTC2020-07-09 15:31:05 +0000 UTC

如何将网格框与窗口大小的宽度对齐？

  • 772

我有 8 个元素水平排列成两行。对于定位，我使用了 CSS 网格布局。进一步，在主页面布局之后，我开始调整它，但是出现了一个水平滚动，块保持原来的宽度。

如何使块对齐，拉伸以适应任何分辨率的屏幕宽度？

基本分辨率

分辨率为 1100 像素

阻止 HTML 代码

    .grid-element-one {
    width: 300px;
    height: 300px;
    background-color: #F7F0DD;
    cursor: pointer;
}
.grid-element-two {
    width: 300px;
    height: 300px;
    background-color: #F7F0DD;
    cursor: pointer;
}
.grid-element-three {
    width: 300px;
    height: 300px;
    background-color: #F7F0DD;
    cursor: pointer;
}
.grid-element-four {
    width: 300px;
    height: 300px;
    background-color: #F7F0DD;
    cursor: pointer;
}
.grid-element-one:hover {
    background-color: #ffec41;
    transition: 900ms;
}
.grid-element-two:hover {
    background-color: #FF2929;
    transition: 900ms;
}
.grid-element-three:hover {
    background-color: #4f75f4;
    transition: 900ms;
}
.grid-element-four:hover {
    background-color: #49cc63;
    transition: 900ms;
}
.block__products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "a b c d"
                         "f g e h";
    grid-gap: 20px;
}
HTML-код блока

<div class="block__products-grid wrap">
    <div class="grid-element-one"></div>
    <div class="grid-element-two"></div>
    <div class="grid-element-three"></div>
    <div class="grid-element-four"></div>
    <div class="grid-element-one"></div>
    <div class="grid-element-two"></div>
    <div class="grid-element-three"></div>
    <div class="grid-element-four"></div>
</div>

html

1 个回答

  1. Best Answer

    网格中有这样一个构造：auto-fit + minmax()。它允许您在没有媒体查询的情况下创建响应式布局：

    .block__products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
}
.grid-element {
    height: 300px;
    background-color: #F7F0DD;
    cursor: pointer;
    transition: .9s;
}
.grid-element-one:hover {
    background-color: #ffec41;
}
.grid-element-two:hover {
    background-color: #FF2929;
}
.grid-element-three:hover {
    background-color: #4f75f4;
}
.grid-element-four:hover {
    background-color: #49cc63;
}
    <div class="block__products-grid wrap">
    <div class="grid-element grid-element-one"></div>
    <div class="grid-element grid-element-two"></div>
    <div class="grid-element grid-element-three"></div>
    <div class="grid-element grid-element-four"></div>
    <div class="grid-element grid-element-one"></div>
    <div class="grid-element grid-element-two"></div>
    <div class="grid-element grid-element-three"></div>
    <div class="grid-element grid-element-four"></div>
</div>

    • 2

相关问题