I am attempting a grid layout, but can't seem to get the left, middle and right to span 4 columns each, along the same row in a 12 column grid.

-------------------------------------------------------------------------
- Header                                                                -
-------------------------------------------------------------------------
-------------------------------------------------------------------------
- Nav                                                                   -
-------------------------------------------------------------------------

-------------------------------------------------------------------------
- Banner
- Banner                                                                -
-------------------------------------------------------------------------
-----------------------  ----------------------- ------------------------
-                      - -                     - -                      -
-   left               - -  middle             - -    right             -
-                      - -                     - -                      -
-                      - -                     - -                      -
------------------------ ----------------------- ------------------------

-------------------------------------------------------------------------
-            footer                  -           footer                 -
-                                    -                                  -
-------------------------------------------------------------------------

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  position: relative;
}

header {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #3bbced;
  padding: 30px;
}

nav {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
  background: #3bbced;
  padding: 30px;
}

main {
  grid-column-start: 1;
  grid-column-end: 13;
  background: grey;
}

.span-12 {
  grid-column-start: span 13;
  grid-row-start: 3;
  grid-row-end: 4;
  background: red;
  padding: 30px;
}

.left {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  background: green;
  padding: 30px;
}

.middle {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 4;
  grid-row-end: 5;
  background: yellow;
  padding: 30px;
}

.right {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 5;
  background: orange;
  padding: 30px;
}

footer {
  grid-column: span 12;
  grid-row: 9 / 10;
}

<div >
  <header >Header</header>
  <nav>
    <ul>
      <a href="#">Home</a>
      <a href="/">Menu</a>
      <a href="/">Book</a>
      <a href="/">About</a>
    </ul>
  </nav>
  <main>
    <article >Ipsum</article>
    <section >Ipsum</section>
    <section >Ipsum</section>
    <section >Ipsum</section>
  </main>
  <footer>
    <div >small logo</div>
    <div >copywrite</div>
  </footer>
</div>

CodePudding user response：

If you have display:grid set on an element this this will only affect it's immediate children. In your case the grid will take effect on the element main since this is the direct child of container.

If you want the grid to affect the left,middle,right as well as the footer columns you would either have to pull them out of their respective parents or you can set main and footer to have the same grid as it's parent.

display: grid;
grid-template-columns: inherit;

I don't know if you will be using the grid on container in any other way than presented in this question. But you might consider not using a grid on container and just putting it on the elements that needs columns.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  position: relative;
}

header {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #3bbced;
  padding: 30px;
}

nav {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
  background: #3bbced;
  padding: 30px;
}

main {
  grid-column-start: 1;
  grid-column-end: 13;
  background: grey;
  display: grid;
  grid-template-columns: inherit;
}
footer{
  display: grid;
  grid-template-columns: inherit;
}

.span-12 {
  grid-column-start: span 13;
  grid-row-start: 3;
  grid-row-end: 4;
  background: red;
  padding: 30px;
}

.left {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
  background: green;
  padding: 30px;
}

.middle {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 4;
  grid-row-end: 5;
  background: yellow;
  padding: 30px;
}

.right {
  grid-column-start: 10;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 5;
  background: orange;
  padding: 30px;
}

footer {
  grid-column: span 12;
  grid-row: 9 / 10;
}

<div >
  <header >Header</header>
  <nav>
    <ul>
      <a href="#">Home</a>
      <a href="/">Menu</a>
      <a href="/">Book</a>
      <a href="/">About</a>
    </ul>
  </nav>
  <main>
    <article >Ipsum</article>
    <section >Ipsum</section>
    <section >Ipsum</section>
    <section >Ipsum</section>
  </main>
  <footer>
    <div >small logo</div>
    <div >copywrite</div>
  </footer>
</div>

CodePudding user response：

Wrap left-middle-right on a div or section and try this css

display : grid;
grid-template-areas: "a a a";
width: 100%;