CSS Grid with row/colspans-CodePudding

Looking for some help with row/colspans within a CSS grid - I have the following layout built, but I cannot get the blue piece to span across the same two columns as the purple piece below it:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <style type="text/css">
      * { box-sizing: border-box; }
      body { margin: 0px; background: #FFFFFF; }
      .grid { width: 100%; height: 100vh; padding: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; }
      .grid-col { display: flex; padding: 25px; align-items: center; }
      .grid-col p { width: 100%; margin: 0px; text-align: center; }
      .grid-col p span { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: #FFFFFF; }
      .grid-1 { background: red; grid-row: 1 / 3; grid-column: 1 / 3; }
      .grid-2 { background: orange; grid-row: 1 / 2; grid-column: 3; }
      .grid-3 { background: yellow; grid-row: 1 / 2; grid-column: 4; }
      .grid-4 { background: green; grid-row: 3 / 5; grid-column: 1 / 3; }
      .grid-5 { background: blue; grid-row: 2 / 4; grid-column 3 / 5; }
      .grid-6 { background: purple; grid-row: 4 / 5; grid-column: 3 / 5; }
    </style>
  </head>
  <body>
    <div >
      <div ><p><span>1</span></p></div>
      <div ><p><span>2</span></p></div>
      <div ><p><span>3</span></p></div>
      <div ><p><span>4</span></p></div>
      <div ><p><span>5</span></p></div>
      <div ><p><span>6</span></p></div>
    </div>
  </body>
</html>

I'm new to CSS grids, so there very well may be errors that are causing it to not work as expected (I've been reading other posts and doing trial and error changes to see what works and what doesn't, but I'm still a little confused about how the layout works) - any assistance here is much appreciated. Thank you!

CodePudding user response：

You forgot a colon

.grid-5 { background: blue; grid-row: 2 / 4; grid-column 3 / 5; }
                                                      ^^^^^

since CSS ignores erroneous syntax inside rulesets, it applied the other property values you set. That's why you should be a bit more focused when you write CSS.

To avoid this, i suggest using firefox dev edition. It highlights errors inside your css, shows specificity conflicts etc. It also has the best tools for grid and flexbox layouts inside the devtools.

CodePudding user response：

Mistake in CSS was the answer - leaving this up in case anyone else is looking for a grid with row/colspan solution.