Highlighted

CSS Grid Help

New Here ,
Feb 21, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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>

TOPICS
Learn Dreamweaver

Views

275

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

CSS Grid Help

New Here ,
Feb 21, 2018

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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>

TOPICS
Learn Dreamweaver

Views

276

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
Feb 21, 2018 0
Adobe Community Professional ,
Feb 21, 2018

Copy link to clipboard

Copied

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)

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...
Feb 21, 2018 0
New Here ,
Feb 21, 2018

Copy link to clipboard

Copied

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

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...
Feb 21, 2018 0
Adobe Community Professional ,
Feb 21, 2018

Copy link to clipboard

Copied

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>

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...
Feb 21, 2018 2