带有中断布局的CSS网格。如何为不同页面的内容设置不同的大小？
我有网格布局。我使用mobile-first方法构建它，这意味着默认情况下（媒体查询之外）所有内容都是针对Mobile的。
桌面布局如下所示：
我有一个“主”内容区域，它被设置为80em。让我们假装那是网站的首页。
但是，如果我需要在某些页面上的“主”区域稍微窄一点，比如联系人页面，可能是70em而不是80em但仍然居中，我该怎么办。
在网格中我有这样的内容：
.grid-layout {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 80em)
minmax(0, 1fr);
grid-template-rows: repeat(2, auto) 200px 1fr;
}
下面是完整的代码，您可以看到它的工作原理：
null
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.grid-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, auto) 1fr 1fr;
min-height: 100vh;
}
.header {
background: lightsalmon;
}
.main {
background: lightseagreen
}
.testimonials {
background: lightgreen;
}
.footer {
align-self: end;
background: lightsalmon;
}
@media (min-width: 52em) {
.grid-layout {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 80em)
minmax(0, 1fr);
grid-template-rows: repeat(2, auto) 200px 1fr;
}
.grid-layout > * {
grid-column: 1/-1;
}
.main {
grid-column: 2;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid-layout.css">
<title>Grid Layout</title>
</head>
<body>
<div class="grid-layout">
<header class="header">
Header
</header>
<main class="main">
<h2>Main</h2>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</main>
<section class="testimonials">
Testimonials
</section>
<footer class="footer">
Footer
</footer>
</div>
</body>
</html>null
基本上，布局工作很好，因为它是，我只是想知道，我如何可以改变的主要区域，以不同的宽度，在不同的页面。你会用什么方法？
欢迎任何建议。谢谢！
共有1个答案
一种可能是定义一个css变量，您可以在某些特定页面中覆盖，但使用80em作为默认值：
HTML
<div class="grid-layout" style="--w: 70em">
</div>
CSS
@media (min-width: 52em) {
.grid-layout {
grid-template-columns:
minmax(0, 1fr)
minmax(0, var(--w, 80em))
minmax(0, 1fr);
grid-template-rows: repeat(2, auto) 200px 1fr;
}
...
}
否则，如果您的变体数量有限，您可以创建一组预定义的类，例如。
@media (min-width: 52em) {
.grid-layout {
--w : 80em
grid-template-columns:
minmax(0, 1fr)
minmax(0, var(--w))
minmax(0, 1fr);
grid-template-rows: repeat(2, auto) 200px 1fr;
}
...
.grid-layout.variantA { --w: 70em }
.grid-layout.variantB { --w: 90em }
}
-
我是angular 4的新手。我试图实现的是在我的应用程序中为不同的页面设置不同的布局页眉和页脚。我有三种不同的情况: 登录，注册页面（无页眉，无页脚） 路由： [“登录”， “注册”] 路线：[''，'about'，'contact'] 路线：['仪表板'，'配置文件'] 我通过在路由器组件html中添加页眉和页脚来临时运行应用程序。 请给我一个更好的方法。 这是我的代码: 我在stack-ov
-
我目前正在尝试创建一个选项卡视图，其中每个选项卡打开不同的布局。我正在使用android.support.design.widget.TabLayout，并且我使用适配器成功地将其与pagerView链接起来。现在，在myFragment类中，如果我调用onCreateView并膨胀布局，则布局（fragment_main）将显示在所有选项卡中。 我有3个片段连接3个标签。现在如何为每个片段设置不
-
我对Java还很陌生，现在我正在玩GUI。我现在有了一个-我们称之为-带有一些内容（文本、图像等）。所以我想做的是创建几个这样的不同内容的“页面”，并且能够在我的程序内在这些页面之间切换。 所以我的问题是，做这件事最好的方法是什么？假设我想用不同的图像和文本创建一个，我应该看什么来实现这一点呢？ 我希望这多少是可以理解的。我只需要被推到正确的方向，这样我就知道该挖掘什么了。
-
我对Java很陌生，现在我正在玩图形用户界面。我现在有一个-让我们称之为-带有一些内容（文本、图像等）。所以我想做的是创建几个具有不同内容的这样的“页面”，并能够在我的程序中在这些页面之间切换。 所以我的问题是，最好的方法是什么？假设我想创建一个包含不同图像和文本的< code>page2，我应该查看哪些内容才能实现？ 我希望这在某种程度上是可以理解的。我只需要被推向正确的方向，这样我就知道要深入
-
在Xamarin中，我目前有两个不同的活动，我想将它们组合在一起并使用一个视页。 一个活动使用以下内容视图: 第二个活动使用以下内容视图: 提前致谢
-
本文向大家介绍为不同大小的设备设置不同CSS样式规则的媒体查询，包括了为不同大小的设备设置不同CSS样式规则的媒体查询的使用技巧和注意事项，需要的朋友参考一下 要为不同的CSS样式规则设置媒体查询，您可以尝试运行以下代码- 示例