文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS网格布局:如何使背景颜色跨越多个单元格？

问CSS网格布局:如何使背景颜色跨越多个单元格？
EN

Stack Overflow用户

提问于 2017-09-06 05:13:59

回答 3查看 21.5K关注 0票数 8

对于FreeCodeCamp分配，我在CSS Grid布局中创建了一个iOS计算器克隆。运行它的JavaScript是以后的工作；我现在专注于设计。

最终结果应该如下所示：

html {
  font-size: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  grid-auto-rows: minmax(700px, auto);
}

.wrapper>div {
  padding: 0;
}

.nested-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.nested-1>div {
  font-family: "Roboto", sans-serif;
  font-size: 0.6rem;
  color: white;
}

.top-bar {
  padding-top: 0.3rem;
}

.flight-modus {
  justify-self: start;
  padding-left: 0.3rem;
}

.charge-status {
  justify-self: end;
  padding-right: 0.3rem;
}

.nested-2 {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
  justify-items: end;
}

.nested-2>div {
  font-family: "Roboto", sans-serif;
  font-size: 5rem;
  font-weight: lighter;
  color: white;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  align-self: end;
}

.nested-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  justify-items: center;
  font-size: 2.2rem;
  color: black;
  background: #ddd;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
  padding: 1rem;
}

.operations {
  font-size: 1.5rem;
  padding: 1.3rem;
}

.bg-grey {
  background: #ccc;
}

.left-cell {
  background: black;
}

.right-cell {
  background: black;
}

.calculator {
  background: #333333;
}

<body class="">
  <div class="wrapper">
    <div class="left-cell">
    </div>

    <div class="calculator">
      <div class="nested-1 top-bar">
        <div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode"> &nbsp;
          <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
        <div>10:10 am</div>
        <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
      </div>

      <div class="nested-2 result">
        <div>3,658.8</div>
      </div>

      <div class="nested-3 keys">
        <div class="operations bg-grey">C</div>
        <div class="operations bg-grey">+/-</div>
        <div class="operations bg-grey">%</div>
        <div class="operations bg-grey">/</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
        <div>5</div>
      </div>

    </div>
    <div class="right-cell">
    </div>
  </div>

我做了什么：

我已经制作了一个带有几个嵌套网格的通用网格。这些嵌套网格中的3号必须包含计算器键(数字0-9、基本数学运算、结果、清除)。

如何在一定数量的cells上设置连续的background-color，例如深灰色、橙色等？现在，在我的个人divs上设置bg会留下空白。接下来，根据示例，cell-borders也应该获得1px的纯色。

在SO和CSS Grid layout / CSS Flexbox教程中搜索过后，我找不到一个简单的解决方案来解决这个明显很简单的任务。我是否应该在此处将Flexbox引入我的网格？

虽然我非常欣赏网格带来的美妙的新动态，以及它与Flexbox的兼容性，但我对这两个都还很陌生。

欢迎对我的代码结构的任何提示和评论！谢谢，克里斯

html

css

flexbox

css-grid

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-09-06 13:05:39

要修复nested-3的边框和背景，您可以使用以下命令设置背景和边框：

背景：#888；网格间距: 1px；

对于nested-3的所有子元素，您可以设置背景：

.嵌套的-3> div { background：#ddd；}

而不是.operations上的padding，您可以将以下内容添加到nested-3 > div：

.嵌套-3> div {添加了*/背景：#ddd；显示:/*；对齐内容:居中；对齐项目:居中；填充: 1.3rem；}

您可能需要从nested-3 div.中删除justify-items: center和padding: 1rem

我也尝试了这个设计--重新排列标记如下：

<div class="nested-3 keys">
    <!-- MODIFIED HERE -->
    <div class="operations bg-grey">C</div>
    <div class="operations bg-grey">+/-</div>
    <div class="operations bg-grey">%</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div class="zero">0</div>
    <div>.</div>
    <div class="operations bg-grey op-right">/</div>
    <div class="op-right">x</div>
    <div class="op-right">-</div>
    <div class="op-right">+</div>
    <div class="op-right">=</div>
</div>

并添加了这些样式：

.nested-3>.op-right {
  grid-column-start: 4;
  grid-row-start: 1;
  background: #fd8a0d;
}

.nested-3>.op-right+.op-right {
  grid-row-start: 2;
}

.nested-3>.op-right+.op-right+.op-right {
  grid-row-start: 3;
}

.nested-3>.op-right+.op-right+.op-right+.op-right {
  grid-row-start: 4;
}

.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {
  grid-row-start: 5;
}

.zero {
  grid-column: span 2;
}

请看下面的代码片段：

html {
  font-size: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  grid-auto-rows: minmax(700px, auto);
}

.wrapper>div {
  padding: 0;
}

.nested-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.nested-1>div {
  font-family: "Roboto", sans-serif;
  font-size: 0.6rem;
  color: white;
}

.top-bar {
  padding-top: 0.3rem;
}

.flight-modus {
  justify-self: start;
  padding-left: 0.3rem;
}

.charge-status {
  justify-self: end;
  padding-right: 0.3rem;
}

.nested-2 {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
  justify-items: end;
}

.nested-2>div {
  font-family: "Roboto", sans-serif;
  font-size: 5rem;
  font-weight: lighter;
  color: white;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  align-self: end;
}

.nested-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  /*justify-items: center;*/
  font-size: 2.2rem;
  color: black;
  background: #888;/* CHANGED */
  grid-gap: 1px;/* ADDED */
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
  /*padding: 1rem;*/
}

.nested-3>div { /* ADDED */
  background: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.3rem;
}

.operations {
  font-size: 1.5rem;
  /*padding: 1.3rem;*/
}

.bg-grey {
  background: #ccc;
}

.left-cell {
  background: black;
}

.right-cell {
  background: black;
}

.calculator {
  background: #333333;
}

/* ADDED THESE BELOW */

.nested-3>.op-right {
  grid-column-start: 4;
  grid-row-start: 1;
  background: #fd8a0d;
}

.nested-3>.op-right+.op-right {
  grid-row-start: 2;
}

.nested-3>.op-right+.op-right+.op-right {
  grid-row-start: 3;
}

.nested-3>.op-right+.op-right+.op-right+.op-right {
  grid-row-start: 4;
}

.nested-3>.op-right+.op-right+.op-right+.op-right+.op-right {
  grid-row-start: 5;
}

.zero {
  grid-column: span 2;
}

<body class="">
  <div class="wrapper">
    <div class="left-cell">
    </div>

    <div class="calculator">
      <div class="nested-1 top-bar">
        <div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode"> &nbsp;
          <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
        <div>10:10 am</div>
        <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
      </div>

      <div class="nested-2 result">
        <div>3,658.8</div>
      </div>

      <div class="nested-3 keys">
        <!-- MODIFIED HERE -->
        <div class="operations bg-grey">C</div>
        <div class="operations bg-grey">+/-</div>
        <div class="operations bg-grey">%</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div class="zero">0</div>
        <div>.</div>
        <div class="operations bg-grey op-right">/</div>
        <div class="op-right">x</div>
        <div class="op-right">-</div>
        <div class="op-right">+</div>
        <div class="op-right">=</div>
      </div>

    </div>
    <div class="right-cell">
    </div>
  </div>

票数 4

Stack Overflow用户

发布于 2017-09-06 05:58:56

这是非常好的，你尝试使用网格，但要小心(https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/)。对于您的问题，我将使用网格只为3个单元格(左，中和右)。但是我已经在这里为你的“嵌套-3”-box使用了Flexbox，所以你可以试一试，试一试。

html{
	font-size: 20px;
}

.wrapper{
	display:grid;
	grid-template-columns: 1.2fr 1fr 1.2fr;
	grid-auto-rows: minmax(700px, auto);
}

.wrapper > div{
	padding: 0;
}

.nested-1{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
}
.nested-1 > div{
	font-family: "Roboto", sans-serif;
	font-size: 0.6rem;
	color: white;
}

	.top-bar{
	padding-top: 0.3rem;
	}

	.flight-modus{
		justify-self:start;
		padding-left: 0.3rem;
	}

	.charge-status{
		justify-self:end;
		padding-right: 0.3rem;
	}

.nested-2{
	display: grid;
	grid-auto-rows: minmax(200px, auto);
	justify-items: end;
}
	.nested-2 > div{
		font-family: "Roboto", sans-serif;
		font-size: 5rem;
		font-weight: lighter;
		color: white;
		padding-left: 0.2rem;
		padding-right: 0.2rem;
		align-self: end;
	}

.nested-3{
	display: flex;
	font-size: 2.2rem;
	color: black;
	background: #ddd;
	font-family: "Roboto", sans-serif;
	font-weight: lighter;
}
  .keys {
    display: flex;
  }
  
  .wrapper1 {
    flex: 1 0 75%;
    display: flex;
    flex-wrap: wrap;
  }
  
  .wrapper1 > div {
    flex: 1 0 25%;
    height: 94px;
    border: 1px solid #777;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .wrapper1 > div.null {
    flex-basis:58%;
  }
  .wrapper2 {
    flex: 1 0 25%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: orange;
    color: #fff;
  }
  
  .wrapper2 > div {
    height: 94px;
    border: 1px solid #777;
    flex: 1 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.bg-grey{
	background: #ccc;
}

.left-cell{
	background: black;
}
.right-cell{
	background: black;
}

.calculator{
	background: #333333;
}

<!DOCTYPE html>
<html lang="en">
	<!-- EDIT HEAD INFO INSIDE CODEPEN PREFS -->
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
		<link rel="stylesheet" href="styles.css">
	</head>
	<body class="">
	<div class="wrapper">
		<div class="left-cell">
		</div>

		<div class="calculator">
			<div class="nested-1 top-bar">
				<div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode">
					&nbsp;
					<img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
				<div>10:10 am</div>
				<div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
			</div>

			<div class="nested-2 result">
			<div>3,658.8</div>
			</div>

			<div class="nested-3 keys">
				<div class="wrapper1">
        <div>C</div>
        <div>+/-</div>
        <div>%</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>3</div>
        <div>2</div>
        <div>1</div>
        <div class="null">0</div>
        <div>.</div>
      </div>
      <div class="wrapper2">
        <div>/</div>
        <div>X</div>
        <div>-</div>
        <div>+</div>
        <div>=</div>
      </div>
			</div>

		</div>
		<div class="right-cell">
		</div>
	</div>
</body>
</html>

希望这能有所帮助！但正如我所说的，试着思考一下，在小事情上使用grid或flex是否有意义。也可以看一看表演。

票数 2

Stack Overflow用户

发布于 2017-09-06 11:28:24

平铺边框

制作黑色边框的一种简单方法是将容器设置为黑色背景色。

.nested-3 {
  background: black;
}

然后将您的前景色应用于每个键。

.nested-3 > div {
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

(使用flexbox将内容居中。)

然后使用属性创建小间距，这将模拟边框。

.nested-3 {
  grid-gap: 1px;
}

html {
  font-size: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  grid-auto-rows: minmax(700px, auto);
}

.wrapper>div {
  padding: 0;
}

.nested-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.nested-1>div {
  font-family: "Roboto", sans-serif;
  font-size: 0.6rem;
  color: white;
}

.top-bar {
  padding-top: 0.3rem;
}

.flight-modus {
  justify-self: start;
  padding-left: 0.3rem;
}

.charge-status {
  justify-self: end;
  padding-right: 0.3rem;
}

.nested-2 {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
  justify-items: end;
}

.nested-2>div {
  font-family: "Roboto", sans-serif;
  font-size: 5rem;
  font-weight: lighter;
  color: white;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  align-self: end;
}

.nested-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  /* justify-items: center; */
  text-align: center;
  font-size: 2.2rem;
  color: black;
  background: black;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
  padding: 1rem;
  grid-gap: 1px;
}

.nested-3>* {
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operations {
  font-size: 1.5rem;
  padding: 1.3rem;
}

.left-cell {
  background: black;
}

.right-cell {
  background: black;
}

.calculator {
  background: #333333;
}

<div class="wrapper">
  <div class="left-cell">
  </div>

  <div class="calculator">
    <div class="nested-1 top-bar">
      <div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode"> &nbsp;
        <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
      <div>10:10 am</div>
      <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
    </div>

    <div class="nested-2 result">
      <div>3,658.8</div>
    </div>

    <div class="nested-3 keys">
      <div class="operations">C</div>
      <div class="operations">+/-</div>
      <div class="operations">%</div>
      <div class="operations">/</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
    </div>

  </div>
  <div class="right-cell">
  </div>
</div>

行/列背景颜色

标准CSS选择器可以处理在行和列上设置背景颜色的任务。

行

.operations {
  font-size: 1.5rem;
  padding: 1.3rem;
  background-color: orange;
}

html {
  font-size: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  grid-auto-rows: minmax(700px, auto);
}

.wrapper>div {
  padding: 0;
}

.nested-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.nested-1>div {
  font-family: "Roboto", sans-serif;
  font-size: 0.6rem;
  color: white;
}

.top-bar {
  padding-top: 0.3rem;
}

.flight-modus {
  justify-self: start;
  padding-left: 0.3rem;
}

.charge-status {
  justify-self: end;
  padding-right: 0.3rem;
}

.nested-2 {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
  justify-items: end;
}

.nested-2>div {
  font-family: "Roboto", sans-serif;
  font-size: 5rem;
  font-weight: lighter;
  color: white;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  align-self: end;
}

.nested-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  /* justify-items: center; */
  text-align: center;
  font-size: 2.2rem;
  color: black;
  background: black;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
  padding: 1rem;
  grid-gap: 1px;
}

.nested-3>* {
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operations {
  font-size: 1.5rem;
  padding: 1.3rem;
  background-color: orange;
}

.left-cell {
  background: black;
}

.right-cell {
  background: black;
}

.calculator {
  background: #333333;
}

<div class="wrapper">
  <div class="left-cell">
  </div>

  <div class="calculator">
    <div class="nested-1 top-bar">
      <div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode"> &nbsp;
        <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
      <div>10:10 am</div>
      <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
    </div>

    <div class="nested-2 result">
      <div>3,658.8</div>
    </div>

    <div class="nested-3 keys">
      <div class="operations">C</div>
      <div class="operations">+/-</div>
      <div class="operations">%</div>
      <div class="operations">/</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
    </div>

  </div>
  <div class="right-cell">
  </div>
</div>

列

.nested-3 > div:nth-child(4n) {
  background-color: orange;
}

.nested-3 > div:not(:nth-child(3)):nth-child(4n + 3) {
  background-color: red;
}

html {
  font-size: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  grid-auto-rows: minmax(700px, auto);
}

.wrapper>div {
  padding: 0;
}

.nested-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.nested-1>div {
  font-family: "Roboto", sans-serif;
  font-size: 0.6rem;
  color: white;
}

.top-bar {
  padding-top: 0.3rem;
}

.flight-modus {
  justify-self: start;
  padding-left: 0.3rem;
}

.charge-status {
  justify-self: end;
  padding-right: 0.3rem;
}

.nested-2 {
  display: grid;
  grid-auto-rows: minmax(200px, auto);
  justify-items: end;
}

.nested-2>div {
  font-family: "Roboto", sans-serif;
  font-size: 5rem;
  font-weight: lighter;
  color: white;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  align-self: end;
}

.nested-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  /* justify-items: center; */
  text-align: center;
  font-size: 2.2rem;
  color: black;
  background: black;
  font-family: "Roboto", sans-serif;
  font-weight: lighter;
  padding: 1rem;
  grid-gap: 1px;
}

.nested-3>* {
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operations {
  font-size: 1.5rem;
  padding: 1.3rem;
}

.nested-3>div:nth-child(4n) {
  background-color: orange;
}

.nested-3>div:not(:nth-child(3)):nth-child(4n + 3) {
  background-color: red;
}

.left-cell {
  background: black;
}

.right-cell {
  background: black;
}

.calculator {
  background: #333333;
}

<div class="wrapper">
  <div class="left-cell">
  </div>

  <div class="calculator">
    <div class="nested-1 top-bar">
      <div class="flight-modus"><img src="http://i63.tinypic.com/sebv9j.png" alt="flight mode"> &nbsp;
        <img src="http://i67.tinypic.com/5zqf4k.png" alt="wifi signal at full strength"></div>
      <div>10:10 am</div>
      <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" alt="battery at near full charge"></div>
    </div>

    <div class="nested-2 result">
      <div>3,658.8</div>
    </div>

    <div class="nested-3 keys">
      <div class="operations">C</div>
      <div class="operations">+/-</div>
      <div class="operations">%</div>
      <div class="operations">/</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
      <div>5</div>
    </div>

  </div>
  <div class="right-cell">
  </div>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46063433

复制

相似问题

问CSS网格布局:如何使背景颜色跨越多个单元格？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格布局:如何使背景颜色跨越多个单元格？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格布局:如何使背景颜色跨越多个单元格？
EN