时间戳

首页 > 解决方案 > 为什么我的 CSS Grid 不是从第一列开始？

html - 为什么我的 CSS Grid 不是从第一列开始？

问题描述

最近我开始学习 CSS Grid。我目前正在开发一个包含 6 行和 9 列的登录页面部分。我有两个元素应该填写本节。

我尝试过什么来解决这个问题：

我搜索了这个问题并阅读了诸如“3 / span 2”之类的功能来选择起始位置。我尝试了 grid-column-start 方法，从 Auto、0 和 1 开始。

我的 HTML

<div class="landing-page">
    <div class="container">
        <div class="landing-page-item image">Image</div>
        <div class="landing-page-item text">Text Here</div>
    </div>
</div>

我的 SCSS

.landing-page {
    height: 100vh;
    width: 100vw;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    box-shadow: 0 12px 21px #7889b6;
    
    .container {
        padding-top: 100px;
        display: grid;
        height: 100%;
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(9, 1fr);
        grid-column-start: 1;
    }
}

.landing-page-item {
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.image {
        grid-row: span 4;
        grid-column: span 2;
        background-color: green;
    }
    
    &.text {
        grid-row: span 4;
        grid-column: span 6;
        background-color: red;
    }
}

我期望发生的事情：

图像从最左上角的网格开始，填充 2 列和 4 行。文本从图像旁边开始，填充 6 列和 4 行。

实际发生的情况： 网格未按预期运行。

图像填充了两列以更清晰地显示错误。我做错了什么？

标签： htmlcsssasscss-grid

解决方案

我查看了哪些外部资源可能会干扰它。原来 clearfix.less:14 添加了一个 css 属性： content: " "; 这似乎是为了提供一个 Clearfix。我将容器重命名为 main-content，问题就解决了。

推荐阅读