标签: css-grid

为什么是 4 列？我的意思是，当我使用 Flexbox 时，我们将其称为 4 行。现在行变成了 CSS 网格中的列？你能解释一下吗？

行是水平的。我在我的电脑上使用 VS Code

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.parent {
  position:fixed;
  width:100%;
  left:0;
  top:14px;
  display:grid;
  grid-template-columns:40% 60%;
  grid-gap:5px;
  background:#eee;
}
.left {
  border:2px solid red;
}
.right {
  border:2px solid red;
}

<div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>

如果位置不是，fixed则没有问题，但如果位置是fixed-parent则右侧不完全可见。

我想要一个第一列为 50px 的网格，最后一列也为 50px，中间的所有列（不知道列数）都有 1fr。

我尝试过grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px;但没有运气。

body {
    font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
.container {
    background:peru;
    padding:10px;
    display:grid;
    grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr));

    /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
}
.container div {
    background:#f0ff00;
    margin:5px;
    padding:5px;
    text-align: center;
    color:#333333;
}

<div class="container">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item …

我开始学习 CSS 中的网格。我认为模仿主Windows\xc2\xa08 Metro面板将是一个很好的练习（我的参考照片：\n https://prnt.sc/orgusg）。

我定义了所有面板并正确排列它们。这是一些参考代码，显示了我对模板列所做的尝试。

.boxes {\n    margin: 50px 150px;\n    display: grid;\n\n    /* \n            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n            grid-template-columns: 2fr 2fr 2fr 2fr;\n            grid-template-columns: 1fr 1fr 1fr 1fr;  \n        \n        This is what I\'ve tried here \n    */\n\n    grid-auto-rows: 50%;\n    grid-gap: 10px;\n}\n

对于“grid-template-columns”的第一个命令，我尝试使所有看起来宽跨度的框从其初始位置（例如，1）到它们应该看起来很宽的位置（例如，2）。

.mail {\n    grid-column: 1/2;\n}\n

对于“grid-template-columns”的第二个命令，我尝试拆分框。

.ie {\n  grid-column: 3/4;\n}\n

但它给了我奇怪的错误。\n我的问题：我无法让盒子看起来不同大小。我该怎么做？

所以我们有一个 div 块，我们应用了一些边框半径使其成为一个圆形。

接下来我们在这个 div 块中定义了一个 css 网格。但是这个 css 网格并不包含在圆圈内。

问题是这个网格仍然将 div 块视为矩形框模型。Div 块仅渲染为圆形，但其内部仍然是一个盒模型。

知道如何仅在圆圈内包含CSS网格吗？

我不想隐藏溢出。我希望网格尊重边界并留在内部。

HTML 代码：

<div> </div>

CSS代码：

div{
  height: 25vh;
  width: 25vh;
  border-radius: 50%;
  border: 2px solid black;
  background-color: black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr:
}

我知道这不是一个新问题，但我还没有找到强有力的辩论，我想听听您的意见。

所以，我想做一个具有单向布局的简单组件。我应该使用什么：Flexbox 还是 CSS Grid？为什么？

只是一种偏好还是各有利弊？

检查这个超级简单的例子：https://codepen.io/joaosaro/pen/rRJXOa 一个有 3 个子容器的容器：两个 div 只占据内容大小，一个可以扩展自身尽可能的最大空间。

.flex-container {
  display: flex;
}
.flex-container .child--max {
  flex: 1;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

我有一个 8 列乘 97 行的数据网格我想用 for 循环在第 0 列中的每 4 行对从 0 到 23 的行进行编号

我想替换我对数字的硬编码。

    <div style="grid-row:2;grid-column:1;text-align:right;font-weight:bold">0</div>
    <div style="grid-row:3;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:4;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:5;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:6;grid-column:1;text-align:right;font-weight:bold">1</div>
    <div style="grid-row:7;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:8;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:9;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:10;grid-column:1;text-align:right;font-weight:bold">2</div>
    <div style="grid-row:11;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:12;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:13;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:14;grid-column:1;text-align:right;font-weight:bold">3</div>
    <div style="grid-row:15;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:16;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:17;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:18;grid-column:1;text-align:right;font-weight:bold">4</div>
    <div style="grid-row:19;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:20;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:21;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:22;grid-column:1;text-align:right;font-weight:bold">5</div>

等等

我需要按比例调整两列的大小，以便第二列比第一列大 4 倍。

我该怎么做呢？

main{
    display: grid;
    grid-template-columns: ???
    grid-gap: 10px;
    grid-auto-rows: minmax(50pc, auto);
}

在使用CSS GRID时，如何在html / css中使用水平对齐方式创建导航栏？

我无法使文字排成一行，无论我做什么，文字都彼此叠放。