CSS Grid is not working in visual studio within the container - html

Question

CSS grid does not seem to be working, and I do not know why. Can anyone advise?
I have an index.html and css via Visual Studio. The html is basic. I made a container with a couple of items in.
This is the 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>
Can someone let me know as my take on it is the container is the parent so I use that class. I changed it to items and nothing.
I have tried changing the elements and that still did not work.
I don't have any other options.

Answer 1

It's really hard to understand what you are expecting😐. Please make your questions more specific in the future.
However, from what I understand, you are not too happy about the second element sitting at extreme right. Ok let's talk about that.
If you want to use the grid-template-columns property in your CSS, Ask yourself these:
How many columns do I want?
How much width do I want on each column?
CASE 1: If you want only ONE column, i.e. you want your list to look like this
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Lorem ipsum dolor, sit
Use grid-template-columns: auto one 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>
CASE 2: If you want TWO columns, i.e. you want your list to look like this
Lorem ipsum dolor sit Lorem ipsum dolor sit
Lorem ipsum dolor, sit
Use grid-template-columns: auto auto two autos for two columns
.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>
CASE 3: If you want THREE columns, i.e. you want your list to look like this
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor, sit
Use grid-template-columns: auto auto auto three autos for three columns
.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>
Now that you know how many columns you want, next you'd want to decide the width you want on each column and width can be different for each column.
If you don't want too much trouble, keep using auto to automatically set the width for each column. But if you're ready to do a little bit of tinkering, start changing the values.
For example, you can say grid-template-columns: 1fr 200px 20%, this will generate a grid of three columns.
The first column will have width of 1fr.
The second column will have width of 200px.
The third column will have width of 20% of its parent, container.
.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>
So, in your case, template-grid-columns: 1fr 200px means the first column is of 1fr width and the second is of 200px. Use your browsers dev tools to verify it.
Here are some useful links:
Play with grid-template-columns
Learn more about Grid
I hope that solves your problem. Happy Coding!😺