CSS-grid：自动放置在命名列中（居中布局，全角元素）

Question

我用 grid-css 创建了一个布局，其中包含 12 列在中心的最大宽度和 2 列只会在大屏幕上显示。此技术基于以下 article。（在示例中，最大宽度设置为较小的数字，以便于检查）

我要解决的问题是：
我想使用 classes 来确定一个元素应该有多少列宽。就像您在下面的示例中看到的那样，我有一个 class col-10 和 col-6。类似于bootstrap框架。

有没有什么方法可以说带有 class“col”的元素应该始终位于 main 列内并忽略外部列完整列中包含哪些？

目前我找到的唯一解决方案是为连续的第一个元素提供正确的起点。（在示例中它是 class“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>

Answer 1

一个想法是考虑一个空元素来填充第一列，这将强制所有元素从您想要的位置开始：

* {
  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>

Answer 2

作为对 row-gap 问题的回应与上一个答案。下面是一个 row-gap 被边距替换的例子：

*{
  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, 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 */
}

.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, 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>

CSS-grid：自动放置在命名列中（居中布局，全角元素）

CSS-grid: automatic placement within a named column (centered layout with full-width elements)

html

css

layout

multiple-columns

css-grid