Question

我有一个3列和2列混合的布局（下图），我需要知道使用单个容器的CSS网格是否可以实现此布局，因为我已经尝试过将其与grid-template-areas一起使用和行/列跨度，但无法弄清楚。问题在于定义了grid-template-columns，其中我用3个cols定义了它，使我的3 col布局有效，但是对于最下面的行，我需要两个col 50％。任何帮助将不胜感激。

这是我的代码。

ant clean all

: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(3, 1fr);
	grid-gap: 20px;
}

.item-1{
	grid-row: span 2;
}

.item-4{
	grid-column: 3 / 3;
	grid-row: 1 / span 2;
}

.item-5,.item-6{
	grid-row: span 2;
}

.item-10{
	grid-column: span 2;
}

Answer 1

您可以这样做。这是经过编辑的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;
}

CSS网格布局列问题

1 个答案: