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元素。甚至内部网格也说明了＃34; Read Keypoints＆＃34;有同样的问题。外部布局是循环的，但我认为这不会影响任何事情。

任何人都可以告诉我如何解决这个问题，而且任何关于如何改善布局整体结构的指针都会非常感激！

Answer 1

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

这是bootstrap.css的.container选择器，它添加了之前和后。如果您正在使用网格，则应该不要使用该类容器在这里（其他名称）或不使用bootstrap。

Answer 2

::before或::after没有错。这些是CSS伪元素/选择器，它们在每个所选元素的内容之前/之后插入一些东西。

这里显示它们是因为在浏览器的Developers工具中动态查看代码。

只需将其与页面的真实来源进行比较 - 右键单击页面并选择View page source（网络浏览器中的消息不同）。将显示一个空白选项卡，其中包含从服务器发送到Web浏览器的确切代码。

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

2 个答案: