Skip to main content
M
mango43
Participant
February 21, 2018
Answered

CSS Grid Help

  • February 21, 2018
  • 1 reply
  • 570 views

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?

This topic has been closed for replies.
Correct answer Jon Fritz

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>

1 reply

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
February 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)

M
mango43Author
Participant
February 21, 2018

Imgur: The magic of the Internet

HTML:

<body class="body">

<div class="container">

<div class="gridcontainer2">

  <div class="grid">

    <img src="images/bean.jpeg" alt="bean">

  </div>

  <div class="grid">

    <img src="images/scape2.jpeg" alt="scape" height="300px">

  </div>

  <div class="grid">

    <img src="images/bean2.jpeg" alt="beann">

  </div>

<div class="grid">

    <img src="images/popcorn.jpeg" alt="pop">

  </div>

<div class="grid">

<img src="images/mountain.jpeg" alt="mount">

</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

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
February 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>

<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>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices