본문 바로가기
Html/이론

grid

by SEOKIHOUSE 2023. 5. 24.

1)grid

  • grid-template-columns 각 열 길이지정
  • grid-template-columns: repeat(4, 100px) -> 4번 100px반복

           

  • grid-column-start: 시작;
  • grid-column-end: 끝;
  • grid-column : 시작/끝     - 하나만 적으면 시작점

  • grid-auto-columns
  • grid-auto-rows: minmax(200px , auto);

세로 길이 200px넘어가면 자동으로 늘어남

if안쓴다면?

200px넘어가는거 안보인다

<!DOCTYPE html>
<html lang="en">
<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>grid</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            /* box-sizing: border-box; */
        }
        ul, li, ol {
            list-style: none;
        }
        a {
            text-decoration: none;
        }

        #wrap {
            display: grid;
            grid-template-columns: 100px 100px 100px 100px;
            /* grid-template-columns: 100px 2fr 1fr 1fr; */
            /* grid-template-columns: repeat(4, 100px); */
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: 200px 200px 200px 200px;
            gap: 10px;
            /* grid-auto-rows: minmax(200px , auto); */
        }
        .items {
            background-color: aquamarine;
            border: 1px solid black;
            
        }

        .one {
            /* grid-column-start: 1;
            grid-column-end: 3; */
            grid-column: 1/3;
            grid-row: 1;
            background-color: yellow;
            
        }
        
        .two {
            grid-column: 2/4;
            grid-row: 1/3;
            opacity: 0.5;
        }
        
        .three {
            grid-column: 1;
            grid-row: 2/5;
            opacity: 0.5;
        }
        /* .four {
            background-color: blueviolet;
            
        } */
        .five {
            grid-column: 2;
            grid-row: 4;
            
        }
        .six {
            grid-column: 3;
            grid-row: 4;
            
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="one items">One</div>
        <div class="two items">Two</div>
        <div class="three items">Three</div>
        <div class="four items">Four
            <br><br><br><br><br><br><br><br><br><br><br><br>
            FourFourFourFourFourFourFo
            <br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <div class="five items">Five</div>
        <div class="six items">Six</div>
        
    </div>
</body>
</html>
  • grid-area(한방에 합치기 어렵..)

ex)2 /1 /span 2/ span 3

-->2번째 행에서 2칸  (grid-row: 2/4;)

--> 1번째 열에서 3칸   (grid-column: 1/4;)

 

어 3이 왜 앞으로안가지.. 아하 행 시작점을 지정안해줘서 글쿠낭 주석친부분 해보자

 

 

추가로 이 부분 해보면 

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            display: grid;
            grid-template-columns: repeat(4, auto);
            gap: 10px;
            background-color: cornflowerblue;
            padding: 10px;
        }
        #wrap div {
            /* background-color: whitesmoke; */
            border-style: collapse;
            border: 1px solid black;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
        .item1 {
            /* grid-area: 2/ 1/ span 2/ span 3; */
            /* 행 열  칸수*/
            grid-column: 1/4;
            grid-row: 2/4;
        }
        .item2 {
            grid-column: 2/4;
            grid-row: 1;
            background-color: aqua;
            opacity: 0.5;
        }
        .item3 {
            grid-column: 1/3;
            grid-row: 1;
            background-color: rgb(190, 42, 42);
            /* opacity: 0.5; */
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
    </div>
</body>
</html>
저작자표시 비영리 변경금지

'Html > 이론' 카테고리의 다른 글

반응형 웹  (0) 2023.05.26
Flex  (0) 2023.05.26
background/position/  (0) 2023.05.23
대소문자/ 들여쓰기/선으로 텍스트꾸미기/ 글자 단어 사이간격/border  (0) 2023.05.22
:active/:hover/:visited/ nth-child  (0) 2023.05.22

관련글

티스토리툴바