HTML _CSS

HTML_CSS GRID

HiroDaegu 2021. 8. 7. 22:24
728x90
SMALL
HTML

<!DOCTYPE html>
<html>

<head>
  <title>GRID</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
</body>

</html>
CSS

body {
  margin: 0;
}

.div1 {
  background-color: #ff0000;
  width: 100%;
  height: 60px;
}

.div2 {
  background-color: #ffa500;
  width: 100%;
  height: 350px;
}

.div3 {
  background-color: #ffff00;
  width: 100%;
  height: 320px;
}

.div4 {
  background-color: #008000;
  width: 100%;
  height: 385px;
}

.div5 {
  background-color: #0000ff;
  width: 100%;
  height: 200px;
}

.div6 {
  background-color: #4b0082;
  width: 100%;
  height: 200px;
}

// tablet
@media (min-width: 768px) {
  div {
    float: left;
  }

  .div2 {
    height: 562px;
  }
  
  .div3 {
    height: 282px;
  }

  .div4 {
    width: 50%;
    height: 360px; 
  }

  .div5 {
    width: 50%;
    height: 180px;
  }

  .div6 {
    width: 50%;
    height: 180px;
  }
}

//desktop
@media (min-width: 992px) {
  .div2 {
    width: 50%;
    height: 700px;
  }
  
  .div3 {
    width: 50%;
    height: 350px;
  }

  .div4 {
    width: 25%;
    height: 350px;
  }

  .div5 {
    width: 25%;
    height: 175px;
  }

  .div6 {
    width: 25%;
    height: 175px;
  }
}

 

728x90
LIST