Css网格布局列问题_Css_Html_Css Grid

Css网格布局列问题

css html

Css网格布局列问题,css,html,css-grid,Css,Html,Css Grid,我有一个由3列和2列组成的布局（下图），我需要知道这个布局是否可以在css网格中使用单个容器实现，因为我已经尝试过将其用于网格模板区域和行/列跨距，但无法理解。问题是在定义网格模板列时，我使用了3列来定义我的3列布局，但对于最下面一行，我需要两列各占50%。任何帮助都将不胜感激。这是我的密码：根目录{ --黄色：#ffc600； --黑色:#2727； } html{ /*边框框模型允许我们在不增加元素大小的情况下为元素添加填充和边框*/ 框大小：边框框； /*一个系统的字体堆栈，所以东

我有一个由3列和2列组成的布局（下图），我需要知道这个布局是否可以在css网格中使用单个容器实现，因为我已经尝试过将其用于网格模板区域和行/列跨距，但无法理解。问题是在定义网格模板列时，我使用了3列来定义我的3列布局，但对于最下面一行，我需要两列各占50%。任何帮助都将不胜感激。

这是我的密码

：根目录{
--黄色：#ffc600；
--黑色:#2727；
}
html{
/*边框框模型允许我们在不增加元素大小的情况下为元素添加填充和边框*/
框大小：边框框；
/*一个系统的字体堆栈，所以东西加载好，快*/
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、机器人、Helvetica、，
Arial，无衬线，“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”；
字号：900；
字体大小：10px；
颜色：var（--黑色）；
文本阴影：02px0rgba（0,0,0,0.07）；
}
/*
这是什么？！
我们继承了框大小：边框框；从我们的选择器
显然，这比应用框大小要好一点：边框框；直接到*选择器
*/
*,
*：之前，
*：之后{
框大小：继承；
}
身体{
背景图像：url（“./images/topolography.svg”），
线性梯度（110度，#f93d66，#6d47d9）；
背景尺寸：340px，自动；
最小高度：计算（100vh-100px）；
利润率：50像素；
/*背景：白色*/
背景附件：固定；
字母间距：-1px；
}
h1，
h2，
h3，
h4，
h5，
h6{
保证金：0.5px 0；
}
/*网格中的每个项目都将包含数字*/
.项目{
/*我们将这些项目的内容放在中心位置。您也可以使用flexbox进行此操作*/
显示：网格；
证明内容：中心；
对齐项目：居中；
边框：5px实心rgba（0,0,0,0.03）；
边界半径：3px；
字体大小：35px；
背景色：var（--黄色）；/*最佳颜色*/
}
.项目p{
保证金：0.5px 0；
}
/*布局*/
.集装箱{
显示：网格；
网格模板列：重复（3，1fr）；
栅隙：20px；
}
.项目-1{
网格行：跨度2；
}
.项目-4{
网格柱：3/3；
网格行：1/2跨；
}
.第5项、第6项{
网格行：跨度2；
}
.项目10{
格构柱：跨度2；
}


1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

你可以这样做。以下是已编辑的CSS：

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  font-size: 10px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-image: url("./images/topography.svg"),
    linear-gradient(110deg, #f93d66, #6d47d9);
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  /* background: white; */
  background-attachment: fixed;
  letter-spacing: -1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}
/* Each item in our grid will contain numbers */
.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow); /* best colour */
}

.item p {
  margin: 0 0 5px 0;
}

/*layout*/

.container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
}

.item-1{
    grid-row: span 2;
  grid-column: span 2;
}

.item-2{
  grid-column: span 2;
}

.item-3{
  grid-row: 2 / 3;
  grid-column: 3 / 5;
}

.item-4{
    grid-column: 5 / 7;
    grid-row: 1 / span 2;
}

.item-5, .item-6{
    grid-row: span 2;
  grid-column: span 2;
}

.item-7, .item-8{
  grid-column: span 2;
}

.item-9{
    grid-row: span 2;
  grid-column: span 2;
}

.item-10{
    grid-row: span 2;
  grid-column: span 4;
}

.item-11{
    grid-row: span 2;
  grid-column: span 3;
}

.item-12{
    grid-row: span 2;
  grid-column: span 3;
}

：根目录{
--黄色：#ffc600；
--黑色:#2727；
}
html{
/*边框框模型允许我们在不增加元素大小的情况下为元素添加填充和边框*/
框大小：边框框；
/*一个系统的字体堆栈，所以东西加载好，快*/
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、机器人、Helvetica、，
Arial，无衬线，“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”；
字号：900；
字体大小：10px；
颜色：var（--黑色）；
文本阴影：02px0rgba（0,0,0,0.07）；
}
/*
这是什么？！
我们继承了框大小：边框框；从我们的选择器
显然，这比应用框大小要好一点：边框框；直接到*选择器
*/
*,
*：之前，
*：之后{
框大小：继承；
}
身体{
背景图像：url（“./images/topolography.svg”），
线性梯度（110度，#f93d66，#6d47d9）；
背景尺寸：340px，自动；
最小高度：计算（100vh-100px）；
利润率：50像素；
/*背景：白色*/
背景附件：固定；
字母间距：-1px；
}
h1，
h2，
h3，
h4，
h5，
h6{
保证金：0.5px 0；
}
/*网格中的每个项目都将包含数字*/
.项目{
/*我们将这些项目的内容放在中心位置。您也可以使用flexbox进行此操作*/
显示：网格；
证明内容：中心；
对齐项目：居中；
边框：5px实心rgba（0,0,0,0.03）；
边界半径：3px；
字体大小：35px；
背景色：var（--黄色）；/*最佳颜色*/
}
.项目p{
保证金：0.5px 0；
}
/*布局*/
.集装箱{
显示：网格；
网格模板列：重复（6，1fr）；
栅隙：20px；
}
.项目-1{
网格行：跨度2；
格构柱：跨度2；
}
.项目-2{
格构柱：跨度2；
}
.项目-3{
网格行：2/3；
网格柱：3/5；
}
.项目-4{
网格柱：5/7；
网格行：1/2跨；
}
.第5项、第6项{
网格行：跨度2；
格构柱：跨度2；
}
.第7项、.第8项{
格构柱：跨度2；
}
.项目9{
网格行：跨度2；
格构柱：跨度2；
}
.项目10{
网格行：跨度2；
格构柱：跨度4；
}
A.项目-11{
网格行：跨度2；
格构柱：跨度3；
}
.项目-12{
网格行：跨度2；
格构柱：跨度3；
}

你可以这样做。以下是已编辑的CSS：

:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 900;
  font-size: 10px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}

/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-image: url("./images/topography.svg"),
    linear-gradient(110deg, #f93d66, #6d47d9);
  background-size: 340px, auto;
  min-height: calc(100vh - 100px);
  margin: 50px;
  /* background: white; */
  background-attachment: fixed;
  letter-spacing: -1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 5px 0;
}
/* Each item in our grid will contain numbers */
.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow); /* best colour */
}

.item p {
  margin: 0 0 5px 0;
}

/*layout*/

.container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 20px;
}

.item-1{
    grid-row: span 2;
  grid-column: span 2;
}

.item-2{
  grid-column: span 2;
}

.item-3{
  grid-row: 2 / 3;
  grid-column: 3 / 5;
}

.item-4{
    grid-column: 5 / 7;
    grid-row: 1 / span 2;
}

.item-5, .item-6{
    grid-row: span 2;
  grid-column: span 2;
}

.item-7, .item-8{
  grid-column: span 2;
}

.item-9{
    grid-row: span 2;
  grid-column: span 2;
}

.item-10{
    grid-row: span 2;
  grid-column: span 4;
}

.item-11{
    grid-row: span 2;
  grid-column: span 3;
}

.item-12{
    grid-row: span 2;
  grid-column: span 3;
}

：根目录{
--黄色：#ffc600；
--黑色:#2727；
}
html{
/*边框框模型允许我们在不增加元素大小的情况下为元素添加填充和边框*/
框大小：边框框；
/*一个系统的字体堆栈，所以东西加载好，快*/
字体系列：-苹果系统、BlinkMacSystemFont、“Segoe UI”、机器人、Helvetica、，
Arial，无衬线，“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”；
字号：900；
字体大小：10px；
颜色：var（--黑色）；
文本阴影：02px0rgba（0,0,0,0.07）；
}
/*
这是什么？！
我们继承了框大小：边框框；从我们的选择器
显然，这比应用框大小要好一点：边框框；直接到*选择器
*/
*,
*：之前，
*：之后{
框大小：继承；
}
身体{
背景图像：url（“./images/topolography.svg”），
线性梯度（110度，#f93d66，#6d47d9）；
背景尺寸：340px，自动；
最小高度：计算（100vh-100px）；
利润率：50像素；
/*背景：白色*/
背景附件：固定；
字母间距：-1px；
}
h1，
h2，
h3，
h4，
h5，
h6{
保证金：0.5px 0；
}
/*网格中的每个项目都将包含数字*/
.项目{
/*我们将这些项目的内容放在中心位置。您也可以使用flexbox进行此操作*/
显示：网格；
证明内容：中心；
对齐项目：居中；
边框：5px实心rgba（0,0,0,0.03）；
边境