小编Aed*_*dan的帖子

某些列具有固定宽度的 CSS 网格

我正在尝试使用 CSS 网格来实现这种布局。

\n\n

图片:

\n\n

在此输入图像描述

\n\n

这是我到目前为止所拥有的:

\n\n

\r\n
\r\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)

html css grid css-grid

5
推荐指数
1
解决办法
7168
查看次数

标签 统计

css ×1

css-grid ×1

grid ×1

html ×1