그리드 레이아웃 - 왜 사용해야하나요? 그리고 부트 스트랩이나 파운데이션과 같은 프레임 워크를 사용해야합니까?

Question

트위터 부트 스트랩 및 파운데이션에 대한 경험이 있으며 개인적으로 사용하고자하는 유일한 방법은 그리드 시스템입니다. 다른 기능은 비 대한 것입니다.

그리드 레이아웃의 전망에 대해 읽었습니다. 발견 한 모든 기사는 '예술적'설명 (황금 비율 요법)을 지향합니다. 나는 마음 속의 코더 다. 그리드 레이아웃을 사용하는 논리적 인 이유가 분명하다. (예 : '열은 모바일 화면에 서로 겹쳐 쌓을 수 있으며, 큰 화면에는 가로로 확장 할 수있다.') 누군가 내 웹 사이트에 그리드 시스템을 적용 할 때 장단점을 줄 수 있습니까? 개인적으로 그리드 시스템을 사용하는 것이 좋다고 생각하십니까?

대답이 예인 경우 트위터 부트 스트랩/파운데이션과 같은 미리 만든 그리드 시스템을 사용해야합니까, 아니면 제 자신 만의 그리드 시스템을 사용해야합니까? 다른 모든 기능은 내 문제와 관련이없는 나를 위해 불필요합니다.

감사합니다. : D

Answer 1

나는이 질문에 가장 적합한 영역이 아닐지도 모르지만 나는 대답하려고 노력할 것이기 때문에 @kunalbhat에 동의한다.

그리드는 속도와 적응력을 고려하여 설계되었습니다. 여러 단계의 속도. 속도의 첫 번째 부분은 코드를 작성하는 속도입니다. 그리드 시스템을 사용할 때 원하는 레이아웃을 쉽게 얻을 수 있으며 모든 것이 올바르게 정렬됩니다. 테이블과 기둥, 대들보 등을 기억할 필요가 없습니다.

두 번째 속도가 코드를 수정하고 있습니다. 필연적으로 돌아가서 변경해야하며 그리드를 사용하면 쉽게 할 수 있습니다. col-md-7을 col-md-6으로 변경하면 쉽게 추적하고 수행 할 수있는 페이지 레이아웃을 약간 조정할 수 있습니다.

당신은 반응 형 디자인을 언급했는데, 부트 스트랩과 파운데이션 모두 반응 형 그리드를 가지고 있습니다. 그리드는 뷰포트 크기에 따라 다른 크기로 스냅됩니다. 그러나 당신은 컨트롤을 가지고 있습니다. 예를 들어 데스크탑에서 화면의 1/12, 태블릿에서 1/4, 태블릿에서 쉽게 수행 할 수있는 전화기에서 100 %를 취하고 싶다면 특정보기 포트를 대상으로하는 그리드 클래스가 있습니다.

또한 이러한 뷰포트를 기반으로 한 가시성 클래스를 제공합니다.

"비 대한"부분은 쉽게 해결됩니다. SCSS를 사용하면 쉽게 라이브러리의 일부만 가져올 수 있습니다. 예를 들어, 한 프로젝트에서 필자는 그리드 만 가져 왔고 상당히 작았습니다.

Answer 2

CSS 그리드 시스템의 주요 단점 중 하나 인 의미 론적 의미 때문인 것 같습니다.

웹 개발자에게는 의미론이 중요하며 col-md-7이라는 클래스를 갖는 것이 가장 의미있는 일이 아니라고 생각합니다.

그러나 그리드는 쉽고 빠르게 사용할 수 있으므로 그리드가 좋으므로 LESS을 사용하기 시작했습니다. CSS에서 변수와 함수 (믹스 인)를 사용할 수 있기 때문에 내 HTLM 대신 CSS에서 내 자신의 그리드 시스템을 만들 수 있습니다.

Frameless에서 시작하여 자신 만의 '수업'을 맞춤 설정할 수 있습니다.