Project: Mondrian

vancouver·2023년 4월 22일
Flexboxgrid
0

CSS 이해하기

목록 보기
21/23

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mondrian Project</title>
  <style>
    /* 
    Write your CSS here 
    Gap Colour: #000
    White: #F0F1EC
    Red: #E72F24
    Black: #232629
    Blue: #004592
    Yellow: #F9D01E

    For dimensions, see dimensions.png image.
    HINT: Remember you can't change the properties of grid lines.
    But grid lines are transparent!
    */
    body { 
      
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    }

    .container {
      width: 748px;
      height: 748px;
      display: grid;
      background-color: #000;
      grid-template-columns: 320px 198px 153px 50px;
      grid-template-rows: 414px 130px 155px 22px;
      gap:9px;
    }
    
    .item {
      background-color:  #F0F1EC;
    }
 
    .red {
      background-color:  #E72F24;
      
    }

    .white1 {
      grid-column: span 3;
    }

    .white2 {
      
      grid-row: span 2;
    }

    .white3 {
      grid-column: span 2;
      grid-row: span 2;
    }

    .blue {
      background-color: #004592;
      border-bottom: 10px solid #232629;
    }

    .white4 {
     
      grid-row: span 2;
    }

    .yellow {
      background-color: #F9D01E;
    }

    .black {
      background-color: #232629
    }
  </style>
</head>

<body>
  <!-- Write your HTML here -->
  <div class="container">
    <div class="item red"></div>
    <div class="item white1"></div>
    <div class="item white2"></div>
    <div class="item white3"></div>

    <div class="item blue"></div>
    <div class="item white4"></div>

    <div class="item"></div>
    <div class="item yellow"></div>
    <div class="item black"></div>


  </div>
</body>

</html>

Result

profile
vancouver
이전 포스트

grid placement

다음 포스트

Project: Tindog

0개의 댓글