Highlighted

grid div images start from the 2nd column

New Here ,
Jan 07, 2020

Copy link to clipboard

Copied

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?

 

Topics

Code, How to, Other

Views

210

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

grid div images start from the 2nd column

New Here ,
Jan 07, 2020

Copy link to clipboard

Copied

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?

 

Topics

Code, How to, Other

Views

211

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jan 07, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
Jan 08, 2020

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...