28112 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de grid

Bonjour, j'ai rencontré un problème lors de la mise en place d'une grid. Elle a pour but de rendre la page responsive et se trouve à la fin de mon code CSS. Mais celle-ci ne semble pas respecter le plan que j'ai défini.
Je viens tout juste de commencer le CSS et je ne connais pas encore les ficelles du langage. Merci d'avance pour votre aide.

Voici mon code HTML et CSS (je sais c'est pas fameux) :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercices de CSS</title>
    <link rel="shortcut icon" href="img/css2-icone.gif">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Exercices de CSS</h1>

    <div class="first">        
        <h2>Exercice n°1</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores assumenda esse libero, natus ea, eum ullam quidem aut iusto dicta quia voluptas modi! Vel sit explicabo fugiat! Deserunt itaque, odio error tempore omnis maxime dolore, corporis voluptate ea, sed illo fuga beatae culpa! Accusantium quibusdam deleniti, quas recusandae, velit nostrum culpa sapiente sit ad nisi porro aspernatur! Illo molestiae dolore, molestias id perspiciatis est laboriosam voluptatem quaerat consequuntur nostrum, aut laborum debitis nisi quis recusandae doloribus! Impedit fugiat quo quibusdam amet suscipit ex et autem ab perspiciatis. Quisquam, nisi aspernatur ipsa tenetur, debitis, mollitia eum quos velit dolorum dignissimos consequuntur.</p>
        <div class="box">
            <div class="box1"><a href="https://www.facebook.com/" target="_blank"><img src="img/css-facebook.gif" height="150" alt="css-facebookl" title="css-facebook"></a></div>
            <div class="box2"><a href="https://www.youtube.com/" target="_blank"><img src="img/css-youtube.gif" height="150" alt="css-youtube" title="css-youtube"></a></div>
            <div class="box3"><a href="https://www.twitter.com/" target="_blank"><img src="img/css-twitter.gif" height="130" alt="css-twitter" title="css-twitter"></a></div>
        </div>
    </div>

</body>
</html>



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: url(./img/css-bg.jpg) no-repeat fixed center/cover;
  height: 100vh;
  width: calc(100% - 10px);
  display: grid;
  grid-template-rows: max-content max-content max-content;
  grid-template-areas:
    "t"
    "f"
    "s";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: whitesmoke;
}

h1 {
  grid-area: "t";
  text-align: center;
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.first {
  grid-area: "f";
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 10px);
  height: fit-content;
  margin: 10px 10px 10px 10px;
  padding: 10px 20px;
  border-radius: 5px;
  backdrop-filter: blur(15px);
  border: solid 1px rgba(248, 194, 106, 0.2);
}

p {
  margin-bottom: 2.5rem;
}

.box {
  display: flex;
  justify-content: center;
}

.box1 {
  background: linear-gradient(
    135deg,
    rgba(221, 141, 88, 1) 30%,
    rgba(249, 218, 112, 1) 100%
  );
  aspect-ratio: 1/1;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
  margin-left: 100px;
}

.box2 {
  background: linear-gradient(
    135deg,
    rgba(221, 141, 88, 1) 30%,
    rgba(249, 218, 112, 1) 100%
  );
  aspect-ratio: 1/1;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
  margin-left: 100px;
}

.box3 {
  background: linear-gradient(
    135deg,
    rgba(221, 141, 88, 1) 30%,
    rgba(249, 218, 112, 1) 100%
  );
  aspect-ratio: 1/1;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 100px;
  margin-left: 100px;
}

h2 {
  margin-bottom: 0.5rem;
}

.second {
  grid-area: "s";
  background: rgba(0, 0, 0, 0.5);
  width: calc(100% - 10px);
  height: fit-content;
  margin: 10px 10px 10px 10px;
  padding: 10px 20px;
  border-radius: 5px;
  backdrop-filter: blur(15px);
  border: solid 1px rgba(248, 194, 106, 0.2);
}

@media screen and (max-width: 1275px) {
  .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "b1" "b2"
      "b3" "b3";
  }

  .box1 {
    grid-area: b1;
  }

  .box2 {
    grid-area: b2;
  }

  .box3 {
    grid-area: b3;
  }
}

Modifié par Yuuno (16 Jul 2021 - 06:42)
Administrateur
Hello,

Lorsque tu places un élément avec grid-area, il ne faut pas de quotes.

Donc pas de grid-area: "t"; mais plutôt grid-area: t;

Ensuite, j'imagine que tu souhaites passer en deux colonnes à partir de 1275px donc il ne faut pas écrire @media screen and (max-width: 1275px) mais plutôt @media screen and (min-width: 1275px)

Bonne journée Smiley smile
Modifié par Raphael (16 Jul 2021 - 08:22)
Meilleure solution
Merci, mais après test, la formule @media screen and (min-width: 1275px)] n'est pas la bonne. Quant au fait de retirer les quottes, cela fais complètement disparaitre mon .box1 et .box2. Au début de mon programme j'avais utiliser avec succès des quotes dans ma grid. Je ne comprend pas pourquoi ici sa ne fonctionne pas. Est-ce que des screens du résultat vous aiderais ?
Modifié par Yuuno (16 Jul 2021 - 14:42)
Je n'ai rien dit, le fait de retirer les quotes fonctionne, j'avais simplement mal interprété votre message. Merci encore de votre aide.
Sujet clos
Aller à