[CSS Framework] Grid Utilities

Helper 클래스

콘텐츠를 정렬할 수 있는 좋은 유틸리티

부트스트랩은 flexbox 용어를 사용한다. flexbox 기반으로 만들어졌기 때문이다. 

 

flexbox, align-items

교차축에서 작동하며 flexbox를 만든다.

콘텐츠를 수직 정렬할 때 적용할 수 있는 옵션이다.

 

            <h2 class="display-4">Grid Aligment</h2>
            <div class="row"> 
                <div class="col-md-6 col-xl-3 bg-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                     Reiciendis exercitationem officiis aliquam minus corrupti 
                     quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                     ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                     doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!
                </div>
                <div class="col-md-6 col-xl-3 bg-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                         Reiciendis exercitationem officiis aliquam minus corrupti 
                         quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                         ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                         doloremque asperiores illo! Quam debitis laudantium 
                         repudiandae tempora sit! Est quaerat voluptatum beatae 
                         dolorum quod aliquid eius ad ratione iusto ullam!
                </div>
                <div class="col-md-6 col-xl-3 bg-success">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                     Reiciendis exercitationem officiis aliquam minus corrupti 
                     quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                     ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                     doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!
                     Doloribus doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!
                </div>
                <div class="col-md-6 col-xl-3 bg-warning">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                         Reiciendis exercitationem officiis aliquam minus corrupti 
                         quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                         ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                         doloremque asperiores illo! Quam debitis laudantium 
                         repudiandae tempora sit! Est quaerat voluptatum beatae 
                         dolorum quod aliquid eius ad ratione iusto ullam!
                </div>

다른 박스들도 초록색 박스만큼 높이가 커져있다. 다른 박스들의 더미텍스트 만큼의 크기를 하기 위해 "align-items-end"를 작성하면 된다.

            <h2 class="display-4">Grid Aligment</h2>
            <div class="row align-items-end"> 
                <div class="col-md-6 col-xl-3 bg-info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                     Reiciendis exercitationem officiis aliquam minus corrupti 
                     quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                     ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                     doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!
                </div>
                <div class="col-md-6 col-xl-3 bg-danger">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                         Reiciendis exercitationem officiis aliquam minus corrupti 
                         quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                         ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                         doloremque asperiores illo! Quam debitis laudantium 
                         repudiandae tempora sit! Est quaerat voluptatum beatae 
                         dolorum quod aliquid eius ad ratione iusto ullam!
                </div>
                <div class="col-md-6 col-xl-3 bg-success">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                    Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                     Reiciendis exercitationem officiis aliquam minus corrupti 
                     quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                     ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                     doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!
                     Doloribus doloremque asperiores illo! Quam debitis laudantium 
                     repudiandae tempora sit! Est quaerat voluptatum beatae 
                     dolorum quod aliquid eius ad ratione iusto ullam!
                </div>
                <div class="col-md-6 col-xl-3 bg-warning">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                         Reiciendis exercitationem officiis aliquam minus corrupti 
                         quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                         ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                         doloremque asperiores illo! Quam debitis laudantium 
                         repudiandae tempora sit! Est quaerat voluptatum beatae 
                         dolorum quod aliquid eius ad ratione iusto ullam!
                </div>
        </div>

콘텐츠가 교차점 끝을 기준으로 정렬되었다. 아래를 기준으로 정렬되었다. center을 입력하면 가운데 정렬이 된다. 

start를 입력하면 위로 정렬된다.

flexbox의 align-items

align-self를 사용해서 하나의 열을 정렬할 수 있다. (align-self-start, align-self-center, align-self-end)

                <div class="col-md-6 col-xl-3 bg-warning align-self-end">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Aperiam molestiae sit, tempore unde porro voluptates est fugit.
                         Reiciendis exercitationem officiis aliquam minus corrupti 
                         quaerat omnis commodi dolore ipsum consequatur! Rem! Lorem 
                         ipsum dolor sit amet consectetur adipisicing elit. Doloribus 
                         doloremque asperiores illo! Quam debitis laudantium 
                         repudiandae tempora sit! Est quaerat voluptatum beatae 
                         dolorum quod aliquid eius ad ratione iusto ullam!
                </div>

중요한 것은 부트스트랩이 과정을 단순화한다. 

수평 공간을 조정하는 유틸리티 클래스 세트가 있다. justify-ontent-start, enter, end, around, between 등이 있다.

            <h3>Justify Content</h3>
            <div class="row">
                <div class="col-4 bg-primary">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                </div>
            </div>

 

여분의 공간이 생겼다. 

            <h3>Justify Content</h3>
            <div class="row border">
                <div class="col-4 bg-primary">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                </div>
            </div>

row border을 입력했더니 옅은 테두리가 생겼다. 여분의 공간이 있고 하나더 추가할 수 있게 된것이다. 

            <h3>Justify Content</h3>
            <div class="row border">
                <div class="col-4 bg-primary">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                </div>
                <div class="col-4 bg-info">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                </div>
            </div>

디폴트는 요소의 주축의 시작점을 정렬하는 것이다. 행의 왼쪽이다. 오른쪽으로 옮기고 싶거나 사이에 공간을 넣고 싶다면 justify-content helper 클래스를 사용하면 된다.

            <h3>Justify Content</h3>
            <div class="row border justify-content-center">
                <div class="col-4 bg-primary">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                </div>
                <div class="col-4 bg-info">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                </div>
            </div>

justify-content-center을 사용하여 가운데 정렬을 만들었다. justify-content-between을 입력하면 가운데 공간을 만들고 박스들은 양 옆으로 간다. 스타일 시트를 손댈 필요없는 장점이 있다. 이 유틸리티 클래스는 각기 다른 화면 크기나 중단점에 대해 변형할 수 있다. 

                <h3>Justify Content</h3>
                <div class="row border justify-content-center justify-content-lg-start justify-content-xl-between">
                    <div class="col-4 bg-primary">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                    </div>
                    <div class="col-4 bg-info">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem ducimus libero fugiat consequuntur repellat dolore mollitia facilis corrupti culpa. Consectetur corrupti accusantium labore molestias perspiciatis possimus. Ullam eveniet quisquam deleniti.
                    </div>
                </div>

창을 좁게하면서 크게하면 크기가 m이상이 되면 다운데 정렬이 되고 l이상이 되면 왼쪽으로 이동하고 xl 이상이면 공간이 생긴다. align-self, align-items 등 정렬을 위한 다른 유틸리티도 마찬가지이다. 다양한 크기나 중단점에 따라 변형이 되도록 설정했다.