我正在尝试使用 CSS 网格来实现这种布局。
\n\n图片:
\n\n\n\n这是我到目前为止所拥有的:
\n\n#wrapper {\r\n display: grid;\r\n gap: 20px;\r\n grid-template-columns: auto 300px 1fr 1fr 180px auto;\r\n grid-template-rows: auto;\r\n grid-template-areas: \r\n "logo nav-primary nav-primary nav-primary nav-primary search"\r\n "nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary nav-secondary"\r\n "aside-1 aside-1 article article aside-2 aside-2"\r\n "footer footer footer footer footer footer";\r\n}\r\n\r\n/* Article: use up remaining width */\r\n#article{\r\n grid-area: article;\r\n}\r\n\r\n/* Logo: use up a little width as possible */\r\n#logo{\r\n grid-area: logo;\r\n}\r\n\r\n/* Nav Primary: use up remaining width */\r\n#nav-primary{\r\n grid-area: nav-primary;\r\n}\r\n\r\n/* …Run Code Online (Sandbox Code Playgroud)