반응 형 웹 디자인 - 그리드 뷰

반응 형 웹 디자인 - 그리드 뷰

Grid-View 란 무엇입니까?

많은 웹 페이지는 격자보기를 기반으로합니다. 즉, 페이지가 열로 나뉘어져 있음을 나타냅니다.

반응 형 그리드 뷰 작성하기

반응 형 그리드 뷰를 구축 할 수 있습니다.

먼저 모든 HTML 요소의 box-sizing속성이로 설정되어 있는지 확인하십시오 border-box. 이렇게하면 여백과 테두리가 요소의 전체 너비와 높이에 포함됩니다.

CSS에 다음 코드를 추가하십시오.

* {

    box-sizing: border-box;

}

CSS3 Box Sizing 장 box-sizing에서 속성에 대해 더 자세히 읽어보십시오 .

다음 예제는 두 개의 열이있는 간단한 반응 형 웹 페이지를 보여줍니다.

25 %75 %

예

.menu {

    width: 25%;

    float: left;

}

.main {

    width: 75%;

    float: left;

}

위의 예제는 웹 페이지에 두 개의 열만 있으면 잘됩니다.

그러나 웹 페이지를보다 잘 제어하기 위해 12 개의 열이있는 반응 형 그리드 뷰를 사용하고자합니다.

먼저 한 열의 백분율을 계산해야합니다 : 100 % / 12 열 = 8.33 %.

그런 다음 각 열 12 개에 대해 하나의 클래스를 만들고 class="col-"섹션에 걸쳐야하는 열의 수를 정의하는 숫자 를 만듭니다 .

CSS :

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

 이 열은 모두 왼쪽으로 떠 있어야하며 15px의 여백이 있어야합니다.

CSS :

[class*="col-"] {

    float: left;

    padding: 15px;

    border: 1px solid red;

}

각 행은에 래핑되어야합니다 <div>. 행 내부의 열 수는 항상 최대 12 개가되어야합니다.

HTML :

<div class="row">

  <div class="col-3">...</div> <!-- 25% -->

  <div class="col-9">...</div> <!-- 75% -->

</div>

한 행 안의 열은 모두 왼쪽으로 떠 있기 때문에 페이지의 흐름에서 벗어나기 때문에 열이없는 것처럼 다른 요소가 배치됩니다. 이를 방지하기 위해 흐름을 지우는 스타일을 추가합니다.

CSS :

.row::after {

    content: "";

    clear: both;

    display: table;

}

또한 스타일과 색상을 추가하여 더욱 멋지게 꾸미고 싶습니다.

예

html {

    font-family: "Lucida Sans", sans-serif;

}

.header {

    background-color: #9933cc;

    color: #ffffff;

    padding: 15px;

}

.menu ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}

.menu li {

    padding: 8px;

    margin-bottom: 7px;

    background-color :#33b5e5;

    color: #ffffff;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.menu li:hover {

    background-color: #0099cc;

}