Creates a responsive layout with a content area and a sidebar.
- Use
display: grid
on the parent container, to create a grid layout. - Use
minmax()
for the second column (sidebar) to allow it to take up between150px
and20%
. - Use
1fr
for the first column (main content) to take up the rest of the remaining space.
预览
This element is 1fr large.
HTML
<div class="container">
<main>
This element is 1fr large.
</main>
<aside>
Min: 150px / Max: 20%
</aside>
</div>
CSS
.container {
display: grid;
grid-template-columns: 1fr minmax(150px, 20%);
height: 100px;
}
main, aside {
padding: 12px;
text-align: center;
}
main {
background: #d4f2c4;
}
aside {
background: #81cfd9;
}
翻译自:https://www.30secondsofcode.org/css/s/responsive-layout-sidebar