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

时间：2017-09-05 21:13:59

标签： html css css3 flexbox css-grid

对于FreeCodeCamp赋值，我在CSS Grid Layout中创建了一个iOS Calculator克隆。运行它的JavaScript适用于以后;我现在专注于设计。

最终结果应如下所示：

enter image description here 

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，基本数学运算， 结果，清楚）。

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

搜索了SO和CSS Grid布局/ CSS Flexbox教程， 我无法找到这个明显简单的任务的简单解决方案。 我应该把Flexbox带到我的网格吗？

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

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

3 个答案:

答案 0 :(得分：3)

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

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

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

    .nested-3 > div {
  background: #ddd;
}

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

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

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

    3. 我也尝试了设计 - 重新安排了标记：

    <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;
}

    请参阅下面的代码：

    ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：2)

尝试使用网格非常好，但要小心（https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/）。对于您的问题，我将仅使用网格为3个单元格（左侧，中间和右侧）。但是我已经将Flexbox用于你的＆＃34;嵌套-3＆＃34; -box这里有意图所以你可以尝试一下并稍微玩一下。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

希望这会有所帮助！但正如我所说的那样，试着考虑一下将网格或flex用于小事情是否合理。也要看一下表演。

答案 2 :(得分：1)

瓷砖边框

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

.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" 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;
}

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" 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;
}

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" 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>

相关问题
最新问题