CSS Grid布局问题求助：实现头部+侧边栏+内容区布局

Hey there! Let's get your grid layout working exactly how you want it. I spotted a couple of small tweaks needed in your code—here's the breakdown and fixed version:

What Was Off in Your Original Code #

• Your grid-template-areas syntax was misconfigured: the side and content areas were defined on separate rows, which would stack them vertically instead of placing them side by side.
• You hadn't specified column width ratios, so the grid had no way to know to allocate 33% to the sidebar and 66% to the content area.

Fixed Code #

.head { grid-area: head; background: tomato; }
.side { grid-area: side; background: purple; }
.content { grid-area: content; background: orange; }

body { margin: 0; }
* { box-sizing: border-box; }

.wrapper {
  display: grid;
  grid-gap: 10px;
  /* Define column width ratio: 33% for sidebar, 66% for content */
  grid-template-columns: 33% 66%;
  /* Map grid areas to rows/columns */
  grid-template-areas:
    "head head"
    "side content";
}

.box { padding: 20px; height: 100px; }

Key Changes Explained #

1. grid-template-columns: This line explicitly sets the width proportion—33% 66% ensures your sidebar takes one-third of the space, and the content takes two-thirds. For a more flexible layout that adapts to container size, you could also use 1fr 2fr (fractional units) which achieves the same proportional split.
2. grid-template-areas: We restructured this to two logical rows:
   • The first row ("head head") makes the header span both columns, so it stretches full width across the top (perfect for your "head居顶" requirement).
   • The second row ("side content") places the sidebar and content side by side in their respective columns.

If you want the header to adjust its height based on its content instead of staying fixed at 100px, just remove the height: 100px rule specifically for the .head element.

内容的提问来源于stack exchange，提问作者Ram kumar