web-dev-qa-db-fra.com

CSS Grid Layout: comment faire en sorte que la couleur d’arrière-plan couvre plusieurs cellules?

Pour une affectation FreeCodeCamp, je suis en train de créer un clone de calculatrice iOS dans CSS Grid Layout. Le JavaScript pour l'exécuter est un travail pour plus tard; Je me concentre maintenant sur le design.

Le résultat final devrait ressembler à ceci:

 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>

Ce que j'ai fait:

J'ai créé une grille générale avec plusieurs grilles imbriquées. Le numéro 3 de ces grilles imbriquées doit contenir les touches de la calculatrice (chiffres 0 à 9, opérations mathématiques de base, résultat, effacer).

Comment définir un background-color continu sur un certain nombre de cells p. Ex. gris plus foncé, orange, etc.? Maintenant, définir bg sur ma personne divs laisse des trous. Ensuite, le cell-borders devrait également prendre une couleur unie 1px, comme dans l'exemple.

Après avoir cherché autour de SO et dans les tutoriels CSS Grid layout/CSS Flexbox, je ne trouvais pas de solution simple à cette tâche évidemment simple. Devrais-je apporter Flexbox dans ma grille ici?

Bien que j'apprécie la nouvelle dynamique merveilleuse apportée par Grid et sa compatibilité avec Flexbox, je suis encore très novice pour les deux.

Tous les conseils et remarques sur la structure de mon code sont les bienvenus! Merci chris

htmlcsscss3flexboxcss-grid
6
Juchtmans Chris

  1. Pour réparer les bordures et l’arrière-plan de nested-3, vous pouvez définir l’arrière-plan et les bordures en utilisant:

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

    et pour tous les enfants de nested-3, vous pouvez définir l’arrière-plan:

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

  2. Au lieu de padding sur .operations, vous pouvez ajouter ceci à nested-3 > div:

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

    et vous devrez peut-être supprimer justify-items: center et padding: 1rem du nested-3 div.

J'ai aussi essayé le design - réorganisé le balisage comme suit:

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

et ajouté ces styles:

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

Voir l'extrait ci-dessous:

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

C’est très bien que vous essayiez d’utiliser une grille mais que vous le fassiez avec précaution ( https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ ) . Pour votre problème, je n’utiliserais la grille que pour les 3 cellules (gauche, centre et droite). Mais j’ai utilisé ici avec intention la boîte "imbriquée-3" afin que vous puissiez l’essayer et la jouer un peu.

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>

J'espère que cela aidera! Mais comme je l’ai dit, essayez de vous demander s’il est judicieux d’utiliser Grid ou Flex pour les petites choses. Regardez aussi la performance.

2
Marouen Mhiri

Bordures de tuiles

Un moyen simple de créer des bordures noires serait de donner au conteneur une couleur de fond noire.

.nested-3 {
  background: black;
}

Appliquez ensuite votre couleur de premier plan à chaque touche.

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

(Utilisez flexbox pour centrer le contenu.)

Utilisez ensuite la propriété grid-gap pour créer de petites gouttières, qui simuleront des bordures.

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

Couleur de fond des lignes/colonnes

Les sélecteurs CSS standard peuvent gérer la tâche de définition des couleurs d'arrière-plan sur les lignes et les colonnes.

Rangée

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

Colonne

.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