CSS Grid Layout：如何使背景颜色跨越多个单元格？

Posted 2023-03-06

技术标签:

【中文标题】CSS Grid Layout：如何使背景颜色跨越多个单元格？【英文标题】：CSS Grid Layout: how to make background colour span multiple cells? 【发布时间】：2018-02-14 05:58:36 【问题描述】：

对于 FreeCodeCamp 作业，我正在 CSS 网格布局中制作 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" > &nbsp;
          <img src="http://i67.tinypic.com/5zqf4k.png" ></div>
        <div>10:10 am</div>
        <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" ></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 网格布局/CSS Flexbox 教程，对于这个明显简单的任务，我找不到简单的解决方案。我应该将 Flexbox 带入我的 Grid 中吗？

尽管我很欣赏 Grid 带来的美妙的新动态，以及它与 Flexbox 的兼容性，但我对这两者仍然非常陌生。

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

【问题讨论】：

【参考方案1】：

您尝试使用网格非常好，但请谨慎使用 (https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/)。对于您的问题，我只会将网格用于 3 个单元格（左、中和右）。但是我有意将 Flexbox 用于您的“nested-3”-box，因此您可以尝试一下并尝试一下。

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" >
					&nbsp;
					<img src="http://i67.tinypic.com/5zqf4k.png" ></div>
				<div>10:10 am</div>
				<div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" ></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】：

平铺边框

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

.nested-3 
  background: black;

然后将前景色应用到每个键。

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

（使用 flexbox 使内容居中。）

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

.nested-3 
  grid-gap: 1px;

jsFiddle demo

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" > &nbsp;
        <img src="http://i67.tinypic.com/5zqf4k.png" ></div>
      <div>10:10 am</div>
      <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" ></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;

jsFiddle demo

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" > &nbsp;
        <img src="http://i67.tinypic.com/5zqf4k.png" ></div>
      <div>10:10 am</div>
      <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" ></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;

jsFiddle demo

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" > &nbsp;
        <img src="http://i67.tinypic.com/5zqf4k.png" ></div>
      <div>10:10 am</div>
      <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" ></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>

【讨论】：

【参考方案3】：

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

background: #888;
grid-gap: 1px;

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

.nested-3 > div 
  background: #ddd;

您可以将其添加到nested-3 > div，而不是padding 上的padding：

.nested-3 > div /* ADDED */
  background: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 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;

参见下面的 sn-p：

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" > &nbsp;
          <img src="http://i67.tinypic.com/5zqf4k.png" ></div>
        <div>10:10 am</div>
        <div class="charge-status">96% <img src="http://i67.tinypic.com/30ldxtx.png" ></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>

【讨论】：

嗨，kukkuz，你能解释一下css类语法.op-right+吗？ + 有什么作用？很好的意见，谢谢，克里斯 + for 相邻的选择器知道了！

以上是关于CSS Grid Layout：如何使背景颜色跨越多个单元格？的主要内容，如果未能解决你的问题，请参考以下文章

如何让 <tr> 标签上的 css 背景颜色跨越整行

如何使背景图像跨越每个表格行并使用 HTML 和/或 CSS 动态调整大小？

jquery如何使css设定好背景颜色的div去掉背景颜色？

Angular Kendo Grid：所选行的背景颜色

如何在listview android中使文本颜色透明？

如何使用 CSS 使元素的背景颜色变暗一点