Highlighted

Thought I knew how to code grid layout; I was wrong.

New Here ,
Jul 26, 2018

Copy link to clipboard

Copied

First, thank you to those who responded to my previous post about viewing a new webpage in DW. I am learning HTML and DW. I am trying to do a grid layout. I got a rudimentary piece of code, both the HTML and the CSS, from a book. It worked fine. But, later in the book, when it is talking about advanced topics such as named grid areas, it tends to only give CSS examples and NOT the related HTML. I am at a loss in trying to get grid areas code to work. I’ve tried this and that and nothing works.

Here's the rudimentary grid layout code that works:

HTML:

<main>

                              <div>Div 1</div><div>Div 2</div><div>Div 3</div><div>Div 4</div>

                              <div>Div 5</div><div>Div 6</div><div>Div 7</div><div>Div 8</div>

                              <div>Div 9</div><div>Div 10</div><div>Div 11</div><div>Div 12</div>

                              <div>Div 13</div><div>Div 14</div><div>Div 15</div><div>Div 16</div>

               </main>

CSS:

div { background-color: blue}

main {

               display: grid;

               grid-template: 100px 100px 100px 100px / 150px 150px 150px 150px;     

               grid-gap: 15px 20px;

}

This creates a four row, four column grid. Now, what I tried to do was make the first row a single grid area, spanning all four boxes of the row.

Here’s the HTML I tried:

<div id="uni">Universe</div>

                              <div>Div 5</div><div>Div 6</div><div>Div 7</div><div>Div 8</div>

                              <div>Div 9</div><div>Div 10</div><div>Div 11</div><div>Div 12</div>

                              <div>Div 13</div><div>Div 14</div><div>Div 15</div><div>Div 16</div>

Here’s some of the CSS I tried:

                 grid-template-areas:

                              "uni uni uni uni"

                              ".     . .     ."

                              ".     . .     ."

                              ".     . .     .";    

               /*grid-template-areas:

                              "uni uni uni uni"

                              "sec5 sec6 sec7 sec8"

                              "sec9 sec10 sec11 sec12"

                              "sec13 sec14 sec15 sec16";   */

              

/*           #uni     {grid-row: 1/2; grid-column: 1 / span 4; }   */

               #uni     {grid-area: uni; }

(The commented out stuff I tried, also.)

Everything I tried produced 3 rows of four boxes and a fourth row of one box. The first, top, left, box contained the word “universe.” I intended one solid box spanning the first row of four original boxes, with the word “universe” in it.

How do I code a grid layout where the first row is one single grid area, displaying a single, solid rectangle spanning all four columns of the fourth row?

The below may give you some more insight:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Grid Areas</title>

<style>

.page-wrapper {

display: grid;

grid-template-columns: 23.5% 23.5% 23.5% 23.5%;

grid-template-rows: auto;

grid-gap: 20px;

grid-template-areas:

"header header header header"

". . . ."

". . . ."

"footer footer footer footer";

width: 90%;

margin: 0 auto;

}

.header {

grid-area: header;

background-color: orange;

text-align: center;

}

.box {

background-color: pink;

}

.footer {

grid-area: footer;

background-color: yellow;

text-align: center;

}

</style>

</head>

<body>

<div class="page-wrapper">

<header class="header">Header</header>

<div class="box">Div 1</div>

<div class="box">Div 2</div>

<div class="box">Div 3</div>

<div class="box">Div 4</div>

<div class="box">Div 5</div>

<div class="box">Div 6</div>

<div class="box">Div 7</div>

<div class="box">Div 8</div>

<footer class="footer">Footer</footer>

</div>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

185

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

Thought I knew how to code grid layout; I was wrong.

New Here ,
Jul 26, 2018

Copy link to clipboard

Copied

First, thank you to those who responded to my previous post about viewing a new webpage in DW. I am learning HTML and DW. I am trying to do a grid layout. I got a rudimentary piece of code, both the HTML and the CSS, from a book. It worked fine. But, later in the book, when it is talking about advanced topics such as named grid areas, it tends to only give CSS examples and NOT the related HTML. I am at a loss in trying to get grid areas code to work. I’ve tried this and that and nothing works.

Here's the rudimentary grid layout code that works:

HTML:

<main>

                              <div>Div 1</div><div>Div 2</div><div>Div 3</div><div>Div 4</div>

                              <div>Div 5</div><div>Div 6</div><div>Div 7</div><div>Div 8</div>

                              <div>Div 9</div><div>Div 10</div><div>Div 11</div><div>Div 12</div>

                              <div>Div 13</div><div>Div 14</div><div>Div 15</div><div>Div 16</div>

               </main>

CSS:

div { background-color: blue}

main {

               display: grid;

               grid-template: 100px 100px 100px 100px / 150px 150px 150px 150px;     

               grid-gap: 15px 20px;

}

This creates a four row, four column grid. Now, what I tried to do was make the first row a single grid area, spanning all four boxes of the row.

Here’s the HTML I tried:

<div id="uni">Universe</div>

                              <div>Div 5</div><div>Div 6</div><div>Div 7</div><div>Div 8</div>

                              <div>Div 9</div><div>Div 10</div><div>Div 11</div><div>Div 12</div>

                              <div>Div 13</div><div>Div 14</div><div>Div 15</div><div>Div 16</div>

Here’s some of the CSS I tried:

                 grid-template-areas:

                              "uni uni uni uni"

                              ".     . .     ."

                              ".     . .     ."

                              ".     . .     .";    

               /*grid-template-areas:

                              "uni uni uni uni"

                              "sec5 sec6 sec7 sec8"

                              "sec9 sec10 sec11 sec12"

                              "sec13 sec14 sec15 sec16";   */

              

/*           #uni     {grid-row: 1/2; grid-column: 1 / span 4; }   */

               #uni     {grid-area: uni; }

(The commented out stuff I tried, also.)

Everything I tried produced 3 rows of four boxes and a fourth row of one box. The first, top, left, box contained the word “universe.” I intended one solid box spanning the first row of four original boxes, with the word “universe” in it.

How do I code a grid layout where the first row is one single grid area, displaying a single, solid rectangle spanning all four columns of the fourth row?

The below may give you some more insight:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Grid Areas</title>

<style>

.page-wrapper {

display: grid;

grid-template-columns: 23.5% 23.5% 23.5% 23.5%;

grid-template-rows: auto;

grid-gap: 20px;

grid-template-areas:

"header header header header"

". . . ."

". . . ."

"footer footer footer footer";

width: 90%;

margin: 0 auto;

}

.header {

grid-area: header;

background-color: orange;

text-align: center;

}

.box {

background-color: pink;

}

.footer {

grid-area: footer;

background-color: yellow;

text-align: center;

}

</style>

</head>

<body>

<div class="page-wrapper">

<header class="header">Header</header>

<div class="box">Div 1</div>

<div class="box">Div 2</div>

<div class="box">Div 3</div>

<div class="box">Div 4</div>

<div class="box">Div 5</div>

<div class="box">Div 6</div>

<div class="box">Div 7</div>

<div class="box">Div 8</div>

<footer class="footer">Footer</footer>

</div>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

186

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
Jul 26, 2018 0
New Here ,
Jul 26, 2018

Copy link to clipboard

Copied

I meant, one rectangle spanning the FIRST row

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...
Jul 26, 2018 0
LEGEND ,
Jul 26, 2018

Copy link to clipboard

Copied

The below may give you some more insight:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Grid Areas</title>

<style>

.page-wrapper {

display: grid;

grid-template-columns: 23.5% 23.5% 23.5% 23.5%;

grid-template-rows: auto;

grid-gap: 20px;

grid-template-areas:

"header header header header"

". . . ."

". . . ."

"footer footer footer footer";

width: 90%;

margin: 0 auto;

}

.header {

grid-area: header;

background-color: orange;

text-align: center;

}

.box {

background-color: pink;

}

.footer {

grid-area: footer;

background-color: yellow;

text-align: center;

}

</style>

</head>

<body>

<div class="page-wrapper">

<header class="header">Header</header>

<div class="box">Div 1</div>

<div class="box">Div 2</div>

<div class="box">Div 3</div>

<div class="box">Div 4</div>

<div class="box">Div 5</div>

<div class="box">Div 6</div>

<div class="box">Div 7</div>

<div class="box">Div 8</div>

<footer class="footer">Footer</footer>

</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...
Jul 26, 2018 1