초보자를 위한 5가지 최고의 대화형 CSS 그리드 레이아웃 생성기

CSS가 존재하는 한 웹 개발자는 CSS로 레이아웃을 디자인하는 데 어려움을 겪었습니다. 페이지에 요소를 배치하는 것은 결코 쉬운 일이 아니며 일반적으로 해당 목적을 위해 설계된 CSS 시스템 대신 부동 소수점이나 표를 사용하는 것과 같은 해결 방법이 필요합니다.

모든 주요 브라우저에서 최근에야 채택한 CSS 그리드의 출현으로 모든 것이 변경됩니다. 마지막으로 웹 페이지에 2차원 레이아웃을 만들고 그 안에 요소를 배치하는 쉬운 방법이 있습니다. 그런 간단한 문제에 대해 더 이상 복잡한 해결 방법이 없습니다.

CSS 그리드에는 한 가지 문제가 있습니다. 많은 개발자, 특히 새로운 개발자는 사용 방법을 배우는 데 어려움을 겪고 있습니다! 와 싸우면 플렉스박스 , 그리드 학습은 불가능한 작업처럼 보일 수 있습니다.

운 좋게도 다른 개발자가 그리드 레이아웃 생성기로 인터넷을 저장하기 위해 여기에 있습니다. 가리키고 클릭하거나 일부 상자를 채우면 작업할 프레임이 생깁니다.

다음은 매우 간단한 레이아웃 제작자에서 CSS 시스템의 훨씬 더 복잡한 기능을 다루는 것에 이르기까지 몇 가지 훌륭한 그리드 생성기 모음입니다.

1. CSS 그리드 생성기

첫 번째는 간단하지만 효과적인 CSS 그리드 생성기 . 프릴이나 혼란스러운 애드온이 없습니다. 그리드를 만들고, 숫자를 약간 조정하고, 웹사이트에 코드를 삽입하기만 하면 됩니다. CSS 그리드를 처음 접하는 경우 시작하기에 좋은 도구입니다.

2. 그리디

그리디 는 원하는 만큼 요소를 추가하고 행 또는 열 크기에 따라 크기를 조정할 수 있는 유용한 CSS 그리드 생성기입니다. 분수( 정말로 ), 픽셀, 퍼센트 또는 자동 - 전체 그리드에 대해 하나의 단위를 사용하도록 고정되어 있지 않습니다. fr을 사용하여 두 개의 열이 있고 나머지 열은 픽셀로 신중하게 크기를 조정하십시오!

삼. 레이아웃잇

와 함께 레이아웃잇 모든 크기의 그리드를 쉽게 생성하고 다른 그리드 내부에 그리드를 배치할 수도 있습니다. 필요에 따라 개별 상자 내부와 외부에 더 많은 열과 행을 추가하고 생성한 레이아웃을 완전히 제어할 수 있습니다.

4. 그리드 마법사

이것은 CSS 그리드에 대해 더 배울 준비가 된 고급 사용자를 위한 도구입니다. 그리드 마법사 단순한 생성기가 아닙니다. 사이드바에서 바로 코드를 편집하고 실시간으로 업데이트되는 것을 볼 수 있습니다. 그런 다음 다운로드하거나 Grid Wiz를 종속 항목으로 추가하고 컴파일합니다.

5. cssgr.id

가장 유연한 CSS 레이아웃 생성기 중 하나는 cssgr.id 시작할 수 있는 다양한 옵션을 제공합니다. 처음에는 5개의 스타터 레이아웃이 있으며 원하는 만큼 항목, 열 및 행을 추가할 수 있습니다. 이 레이아웃이 어떻게 작동하는지 볼 수 있도록 자리 표시자 텍스트 옵션도 있습니다.

CSS에서 쉽게 그리드 만들기

웹 개발자는 항상 더 우수하고 효율적인 인터넷 백엔드를 향해 나아가고 있습니다. CSS 그리드는 최신 개발 중 하나이며 CSS 디자이너를 괴롭히는 오랜 문제를 마침내 해결했습니다.

CSS 그리드는 실제로 2011년에 제안된 이후로 주변에 있었지만 2017년이 되어서야 모든 주요 브라우저에서 마침내 지원을 채택했습니다.

이제 개발자가 더 이상 사용에 대해 경계할 필요가 없으므로 이러한 레이아웃 생성기와 마찬가지로 수많은 CSS 그리드 가이드, 자습서 및 리소스가 만들어졌습니다. 따라서 웹 페이지를 디자인하기 위해 flexbox 또는 float와 같은 해결 방법을 계속 사용하고 있다면 대신 그리드를 사용해 보십시오. 학습에 도움이 되는 온라인 지원이 많이 있습니다.

더 알아보기

CSS 그리드 튜토리얼 | 반응형 단기집중과정

읽어 주셔서 감사합니다 !

#css