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

【问题标题】：Why does my CSS Grid not start from Column one?为什么我的 CSS Grid 不是从第一列开始？
【发布时间】：2021-04-22 12:05:12
【问题描述】：

最近我开始学习 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 行。

实际发生的情况：

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

【问题讨论】：

您的代码运行良好：jsfiddle.net/rabzjmq6
@TemaniAfif 根据您的评论，我查看了哪些外部资源可能会干扰它。原来 clearfix.less:14 添加了一个 css 属性： content: " ";这似乎是为了提供一个 Clearfix。我将容器重命名为 main-content，问题就解决了。

标签： html css sass css-grid

【解决方案1】：

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

【讨论】：