在 CSS 网格中使用 grid-template-areas 时,我想要一个跨越整个宽度的标题。是的,我可以使用 repeat( 12, 1fr) 定义模板网格列,但我正在寻找一种使用它的方法,而不必将列的名称写入 12 次。见下文。
grid-template-areas:
"article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
"header header header header header header header header header header header header"
"main main main main main main main main main aside aside aside"
"footer footer footer footer footer footer footer footer footer footer footer footer";
Run Code Online (Sandbox Code Playgroud)
第一行有 'article-hero 写了 12 次,有没有办法使用重复,这样我就可以做repeat(12,article-hero)而不是写 12 次?
所以我正在创建一个布局
<div id="structure-content">
<main>content goes here</main>
<aside>aside content</aside>
</div>
Run Code Online (Sandbox Code Playgroud)
I want the aside to be a quarter of the width and to automatically wrap to below the main once it hits a certain size and the main to take the full width. I know I can do this with media queries but people are saying that it can be done with grid and no media queries. I have been experimenting and researching for hours and cannot work it out. Any …