Html - Why do my grid-template commands produce rows rather than columns?

LadyofLA
June 24, 2024
77 views
0 votes
2 Answers

I’m learning CSS grid layout. Here is the result that I want: Holy Grail Correct Result

Here is the result I’m getting: Incorrect Result

html {
  width: 100%;                 /* 100% width of parent (root) element */
  height: 100vh;                   /* 100% height of viewport */
  background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
  font-size: 1.0em;                /* root font size */
  font-family: Arial, sans-serif;
}
body {
  margin: 0;                  /* No margin at edge of content */
  height: 100%;               /* 100% height of parent (html) element */
  padding: 0;
}

.header {
  font-size: 1.5rem;
  background-color: #4c7d7e;
  color: white;
  grid-area: hd;
}
.footer {
  font-size: 0.75rem;
  background-color: #4c7d7e;
  color: white;
  grid-area: ft;
}
.aside-left, .aside-right {
  font-size: 0.85rem;
  background-color: #6a7d8c;
  color: black;
}
.main {
  color: black;
  grid-area: main;
  background-color: #7c959d;
}
.aside-left {
  grid-area: al;
}
.aside-right {
  grid-area: ar;
}
.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template: 1fr 3fr 1fr / 1fr 2fr 1fr;
  grid-template-areas: 
    "hd hd hd "
    "al main ar"
    "ft ft ft";
}

<div class="container">
  <header class="header">
    Header
  </header>
  <main>
    <aside class="aside-left">
      Left Column
    </aside>

    <div class="main">
      Main Content
    </div>

    <aside class="aside-right">
      Right Column
    </aside>
  </main>
  <footer class="footer">
    Footer
  </footer>
</div>

I’ve google repeatedly searching for grid-template-columns, grid-template-rows, etc. and have found nothing to tell me what I’m doing wrong.

Any hints would be greatly appreciated.

Tags: css-grid html

Answers

This corrected HTML and CSS will create a grid layout with a header, main content area with left and right columns, and a footer.
The corrected CSS uses the grid-template-areas property to define the layout and assigns grid areas to the respective elements. The grid-template-rows and grid-template-columns properties define the sizing of the rows and columns within the grid.
The corrected HTML restructures the main content area to include the left and right columns within the main element.

.container {
  display: grid;
  grid-template-areas:
    "header"
    "aside-left content aside-right"
    "footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr 1fr;
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #4c7d7e;
  color: white;
  padding: 10px;
}

.main {
  grid-area: content;
  background-color: #7c959d;
  color: black;
  padding: 10px;
}

.aside-left, .aside-right {
  background-color: #6a7d8c;
  color: black;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #4c7d7e;
  color: white;
  padding: 10px;
}

<div class="container">
  <header class="header">
  </header>
  <main class="main">
    <aside class="aside-left">
      Left Column
    </aside>
    <div class="content">
      Main Content
    </div>
    <aside class="aside-right">
      Right Column
    </aside>
  </main>
  <footer class="footer">
    Footer
  </footer>
</div>

You need to correct the HTML structure and ensure the grid areas are properly assigned to the correct elements.

html {
  width: 100%;                 
  height: 100vh;                  
  background: rgba(0, 0, 0, 0.1); 
  font-size: 1em;                
  font-family: Arial, sans-serif;
}
body {
  margin: 0;                  
  height: 100%;               
  padding: 0;
}
.header {
  font-size: 1.5rem;
  background-color: #4c7d7e;
  color: white;
  grid-area: hd;
}
.footer {
  font-size: 0.75rem;
  background-color: #4c7d7e;
  color: white;
  grid-area: ft;
}
.aside-left, .aside-right {
  font-size: 0.85rem;
  background-color: #6a7d8c;
  color: black;
}
.main {
  color: black;
  grid-area: main;
  background-color: #7c959d;
}
.aside-left {
  grid-area: al;
}
.aside-right {
  grid-area: ar;
}
.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template: 1fr 3fr 1fr / 1fr 2fr 1fr;
  grid-template-areas: 
    "hd hd hd"
    "al main ar"
    "ft ft ft";
}

<div class="container">
  <header class="header">
    Header
  </header>
  <aside class="aside-left">
    Left Column
  </aside>
  <div class="main">
    Main Content
  </div>
  <aside class="aside-right">
    Right Column
  </aside>
  <footer class="footer">
    Footer
  </footer>
</div>

Ensure the grid areas are directly inside the container, and not nested inside other elements like <main>.
Define the grid areas for each element using grid-area to place them correctly in the grid layout.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why do my grid-template commands produce rows rather than columns?

Answers