it-swarm.com.ru

CSS Grid Layout: как сделать так, чтобы цвет фона охватывал несколько ячеек?

Для задания FreeCodeCamp я делаю клон iOS Calculator в CSS Grid Layout. 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 здесь?

Насколько я ценю замечательную новую динамику, которую приносит Grid, и ее совместимость с Flexbox, я все еще очень новичок в обоих.

Любые советы и замечания по моей структуре кода приветствуются! Спасибо, Крис

6
Juchtmans Chris
  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 и padding: 1rem из nested-3 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>

и добавил эти стили:

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

3
kukkuz

Это очень хорошо, что вы пытаетесь использовать грид, но просто делайте это осторожно ( https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ ) , Для вашего вопроса я бы использовал сетку только для 3 клеток (слева, в центре и справа). Но я использовал Flexbox для вашей «вложенной-3» -бокса с намерением, чтобы вы могли попробовать и поиграть с ней немного.

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
Marouen Mhiri

Плитка Границы

Простой способ сделать черные границы - это придать контейнеру черный цвет фона.

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

1
Michael_B