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?
1 Correct answer
2
Replies
AdChoices