CSS Grid Help

Report · Feb 21, 2018

I'm attempting to make a grid in dreamweaver with a collection of images, however I can't get the final outcome to look as I need it to

Imgur: The magic of the Internet

I'm trying to replicate that above grid, but I can't get the leaf image to span across the columns and rows.

How can I do this?

Report · Feb 21, 2018

We would have to be able to see your code to tell you where you've gone wrong with your work.

Could you post a link to your work in progress, or if you don't have a server to upload to, copy/paste the entire code of your page into the forum (don't use email, code won't come through)

Report · Feb 21, 2018

Imgur: The magic of the Internet

HTML:

</div>

</div>

</div>

</div>

</div>

CSS:

.body2{

width: 100%;

}

.gridcontainer2{

display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr 1fr;

grid-gap: 1px;

max-width: 1200px;

margin: 0 auto;

}

.grid {

}

I still have some more images to add into the html

Report · Feb 21, 2018

If I were using CSS Grid, I wouldn't do it this way.

I'd go with defining the grid-areas using recognizable names, then layout the grid using the grid-area names. Something like this...

<!doctype html>

<html>

<head>

<style>

.grid-container {

display:grid;

grid:

/* each quoted set of grid-area names represents a row*/

/* each grid-area name represents the content of the column in a given row*/

'upperleft main main main'

'upperleftbottom main main main'

'middleleft center center bottomright'

'bottomleft bottomleft bottomleft bottomright';

grid-gap:10px;

background-color:orange;

}

.grid-container>div {

background-color:lightgoldenrodyellow;

}

/* use classes to give each element an easy to remember grid-area name to add to the text version of the grid layout above */

.item1 { grid-area: upperleft; }

.item2 { grid-area: upperleftbottom; }

.item3 { grid-area: main; }

.item4 { grid-area: middleleft; }

.item5 { grid-area: center; }

.item6 { grid-area: bottomleft; }

.item7 { grid-area: bottomright; }

</style>

</head>

<body>

</div>

</body>

</html>

CSS Grid Help

1 Correct answer