CSS网格在容器内的visual studio中不工作

Question

CSS网格似乎不工作，我不知道为什么。有人能给点建议吗?

我有一个index.html和css通过Visual Studio。html是基本的。我做了一个容器，里面有一些物品

这是html

.container {
display: grid;
grid-template-columns: 1fr 200px;
}

<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>

谁能让我知道我的看法是容器是父类，所以我使用那个类。我把它改成了items and nothing

我试过改变元素，但仍然不起作用。我没有别的选择。

Answer 1

真的很难理解你在期待什么😐。请以后提出更具体的问题。

然而，据我所知，你对坐在最右边的第二个元素不太高兴。好吧，我们来谈谈这个。

如果你想在你的CSS中使用grid-template-columns属性，问你自己这些:

1. 我想要多少列?
2. 每列的宽度是多少?

案例1:如果只需要一个列，也就是说，你想让你的列表看起来像这样

Lorem ipsum dolor sit
Lorem ipsum dolor sit
Lorem ipsum dolor, sit

使用grid-template-columns: autoone auto for one column

.container {
display: grid;
grid-template-columns: auto;
}

<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>

---

案例2:如果你想要TWO列，也就是说，你想让你的列表看起来像这样

Lorem ipsum dolor sit       Lorem ipsum dolor sit
Lorem ipsum dolor, sit

使用grid-template-columns: auto auto两列两个汽车

.container {
display: grid;
grid-template-columns: auto auto;
}

<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>

---

案例3:如果你想要THREE列，也就是说，你想让你的列表看起来像这样

Lorem ipsum dolor sit       Lorem ipsum dolor sit      Lorem ipsum dolor, sit

使用grid-template-columns: auto auto auto三列三车

.container {
display: grid;
grid-template-columns: auto auto auto;
}

<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>

---

现在你知道你想要多少列，接下来你要决定你想要的宽度在每个列和宽度可以为每个列不同.

如果你不想太麻烦，继续使用auto来自动设置每个列的宽度。但是如果你准备做一些修改，开始改变值。

例如，你可以说grid-template-columns: 1fr 200px 20%，这将生成一个由三个组成的网格列。

• 第一列的宽度为1fr。
• 第二列的宽度为200px
• 第三列的宽度为其父列container的20%。

.container {
display: grid;
grid-template-columns: 1fr 200px 20%;
}

<div class="container">
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor sit </div>
<div class="items">Lorem ipsum dolor, sit </div>
</div>

---

所以，在你的情况下，template-grid-columns: 1fr 200px意味着第一列是1fr宽度，第二列是200px。使用你的浏览器开发工具来验证它。

下面是一些有用的链接:

1. 使用grid-template-columns
2. 了解更多关于Grid的信息

我希望这能解决你的问题。编码快乐!😺