Skip to main content
F
funny_magnificence154A
Participant
January 8, 2020
Question

grid div images start from the 2nd column

  • January 8, 2020
  • 2 replies
  • 366 views

Hi all,

I'm trying to add images using div grid. Here's the code I used:

 

.container {
display: grid;
grid-column-start: col 0;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);

}

 

<div class="container">
<div><img src="images/project-category-1-650x490.jpg"/></div>
<div><img src="images/project-category-2-650x490.jpg"/></div>
<div><img src="images/project-category-3-650x490.jpg"/></div>
<div><img src="images/project-category-4-650x490.jpg"/></div>
<div><img src="images/project-category-5-650x490.jpg"/></div>
<div><img src="images/project-category-6-650x490.jpg"/></div>
</div>

the problem is that the first row first column is empty and the images start filling the grid from the second column. What am I doing wrong?

 

This topic has been closed for replies.

2 replies

O
osgood_
Legend
January 8, 2020

Your code works ok for me.

 

You don't need the below, infact its not even a recognised value (col 0;) and its applied to the wrong css selector.

 

grid-column-start: col 0;

 

Neither do you need:

grid-template-rows: repeat(auto-fit, 1fr);

 

To move the grid items around you need to give them a specific class name or a specific id:

 

<div class="grid-item-1><img src="images/project-category-1-650x490.jpg"/></div>

 

Then use a css selector to position the <div> (not that you require to do this as you just require a grid of images that are responsive according to the browser window width available, but an example would be:

 

.grid-item-1 {
grid-column-start: 2;

}

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 8, 2020

This code works OK for me in Firefox and Chrome.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
.container { 
display: grid;
grid-column-start: col 0;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fit, 1fr);
}

.container img {
vertical-align: baseline;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

<div> <img src="https://dummyimage.com/650x490>" alt="placeholder"></div>

</div>
</body>
</html>
Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices