问题描述
我创建了一个带有grid-css的布局，该布局包含居中的12列（最大宽度）和2列，这些列仅在大屏幕上显示。此技术基于以下article。 （在示例中，将max-width设置为一个较小的数字，以便于检查）
我要解决的问题是：
我想使用类来确定一个元素应该有多少列宽。就像您在下面的示例中看到的那样，我有一个col-10和col-6类。类似于引导框架。
我是否可以说某种方式，例如，具有类“ col”的元素应始终位于 main 列之内，而忽略 full中包含的外部列列？
目前，我找到的唯一解决方案是给出连续的第一个元素，即正确的起点。 （在示例中，它是“ main-start”类）
示例代码：
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav{
display:flex;
justify-content: flex-end;
}
a{
text-decoration:none;
color:white;
font-size: 10px;
background-color: orange;
padding: 0.5em;
}
.grid{
display: grid;
grid-template-columns:
[full-start]minmax(0,1fr)
[main-start] repeat(12,minmax(0,40px)) [main-end]
minmax(0,1fr)
[full-end];
}
.main-start{
grid-column-start: main-start;
}
.col-6{
grid-column-end: span 6;
}
.col-10{
grid-column-end: span 10;
}
.full-width{
grid-column:full;
}
.gradient{
color: white;
text-align:center;
height: 90px;
background:linear-gradient(to bottom right,red,coral);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=">
<title>Grid centered design with full width elements</title>
</head>
<body>
<header class="grid">
<h1 class="col-6 main-start">MyWebsiteTitle</h1>
<nav class="col-6">
<a href="#">Page1</a>
<a href="#">Page2</a>
<a href="#">Page3</a>
</nav>
<p class="col-10">This is not inside main because it has no main-start class</p>
<div class="full-width gradient">A full-width banner</div>
</header>
</body>
</html>解决方法
一个想法是考虑将一个空元素填充到第一列中，这将迫使所有元素从所需的位置开始
* {
margin: 0;
}
nav {
display: flex;
justify-content: flex-end;
}
.grid {
display: grid;
grid-template-columns:
[full-start]minmax(0,1fr)
[main-start] repeat(12,minmax(0,40px)) [main-end] minmax(0,1fr) [full-end];
}
/* added */
.grid::before {
content:"";
grid-column:full-start/main-start;
grid-row:span 100; /* take a lot of rows */
}
/**/
.col-6 {
grid-column-end: span 6;
}
.col-10 {
grid-column-end: span 10;
}
.full-width {
grid-column: full;
}
.gradient {
color: white;
text-align: center;
height: 90px;
background: linear-gradient(to bottom right,red,coral);
}<header class="grid">
<h1 class="col-6">MyWebsiteTitle</h1>
<nav class="col-6">
<a href="#">Page1</a>
<a href="#">Page2</a>
<a href="#">Page3</a>
</nav>
<p class="col-10">This is not inside main because it has no main-start class</p>
<div class="full-width gradient">A full-width banner</div>
</header>,
针对具有上一个答案的行间距问题的回答。这是一个用空白代替行距的示例：
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
nav{
display:flex;
justify-content: flex-end;
}
a{
text-decoration:none;
color:white;
font-size: 10px;
background-color: orange;
padding: 0.5em;
}
.grid{
display: grid;
/* added */
column-gap: 0.5rem;
/**/
grid-template-columns:
[full-start]minmax(0,1fr)
[main-start] repeat(12,40px)) [main-end]
minmax(0,1fr)
[full-end];
}
/* added */
.grid::before {
content:"";
grid-column:full-start/main-start;
grid-row:span 100; /* take a lot of rows */
}
.grid > *:not(:last-child) {
/* row-gap */
margin-bottom: 0.5rem;
}
/**/
.main-start{
grid-column-start: main-start;
}
.col-6{
grid-column-end: span 6;
}
.col-10{
grid-column-end: span 10;
}
.full-width{
grid-column:full;
}
.gradient{
color: white;
text-align:center;
height: 90px;
background:linear-gradient(to bottom right,coral);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=">
<title>Grid centered design with full width elements</title>
</head>
<body>
<header class="grid">
<h1 class="col-6 main-start">MyWebsiteTitle</h1>
<nav class="col-6">
<a href="#">Page1</a>
<a href="#">Page2</a>
<a href="#">Page3</a>
</nav>
<p class="col-10">This is not inside main because it has no main-start class</p>
<div class="full-width gradient">A full-width banner</div>
</header>
</body>
</html>
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...