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?
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>
<meta charset="utf-8">
<title>Grid</title>
<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 class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices