html - CSS Grid 自动添加一个::before 元素

Question

我是 CSS 的新手，正在尝试一个简单的网格布局。这就是我的。

CSS

.layoutGrid {
    display: grid;
    grid-gap: 10px;
    grid-auto-rows: minMax(100px, auto);
}

.articleCard {
    display: grid;
    grid-template-rows: 100px 300px 100px;
    grid-template-areas: "article-title"
                         "article-body"
                         "article-footer";
    grid-auto-flow: row dense;
}

.articleHeader {
    grid-area: article-title;
}

.articleBody {
    grid-area: article-body;
}

.articleFooter {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-areas: "articleDomain articleKeypoints";
    grid-area: article-footer;
    grid-auto-flow: row dense;
}

.articleKeypoints {
    grid-area: article-keypoints;
}

.articleDomain {
    grid-area: article-domain;
}

@media only screen and (min-width: 600px) {
    .layoutGrid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media only screen and (max-width: 600px) {

    .layoutGrid {
        grid-template-columns: repeat(1, 1fr);
    }
}

HTML

<div id="mainContent" className="container layoutGrid">
        <Card className={"articleCard"} style={{height:"500px", flex: "1 1 auto", padding: "1.25rem", boxSizing: "border-box"}}>

            <CardHeader className="articleHeader">
                <CardTitle>{props.articleDetails.Title}</CardTitle>
            </CardHeader>
            <CardBody className="articleBody">
                <CardText>{props.articleDetails.Summary}</CardText>
            </CardBody>
            <div className="row articleFooter">
                <div className="col-auto mr-auto">
                    <Button outline color="info">Read Keypoints</Button>
                </div>
                <div className="col-auto">
                    <CardSubtitle style={{verticalAlign: 'text-bottom'}}>
                        <small>{props.articleDetails.Domain}</small>
                    </CardSubtitle>
                </div>
            </div>
        </Card>
    </div>

这里没有添加::before 元素，但结果是网格的第一个元素始终是::before 元素。即使是显示“读取关键点”的内部网格也有同样的问题。外部布局处于循环状态，但我认为这不会影响任何内容。

任何人都可以告诉我如何解决这个问题，以及有关如何改进布局整体结构的任何指示，我们将不胜感激!

Answer 1

写下我的评论作为答案，因为它似乎可以解决问题。

That's bootstrap.css its .container selector that adds the before and after. If you're using grid you should either not user the class container here (some other name) or not use bootstrap.