5 슈퍼 CSS 그리드 생성기 레이아웃 용

5 개의 온라인 CSS 그리드 생성기 평가 : 반응 형 웹 레이아웃을 효율적으로 빌드

코어 포인트 :

CSS 그리드는 웹 레이아웃을 만들기위한 강력한 도구입니다. 발전기 및 Dmitrii Bykov의 CSS 그리드 레이아웃 생성기.

이 생성기가 레이아웃 생성 프로세스를 단순화 할 수 있지만 모든 발전기가 CSS 그리드의 전체 기능을 완전히 지원하는 것은 아닙니다. 저자의 테스트에서 Dmitrii Bykov의 CSS 그리드 생성기만이 복잡하고 수동으로 작성된 레이아웃을 완벽하게 재현 할 수있었습니다. CSS 그리드 생성기는 시각적 인코딩을 선호하거나 CSS 그리드를 처음 접하는 사용자에게 특히 유용하지만 CSS 그리드를 더 잘 아는 사람들에게는 더 제한적으로 보일 수 있습니다. 제한 사항에도 불구하고 CSS 그리드 생성기는 여전히 기본 레이아웃을 신속하게 생성하는 편리한 도구입니다. 그러나 이러한 도구를 사용할 때, 특히보다 복잡한 레이아웃을 설계 할 때 CSS 그리드의 기본 사항을 이해하는 것이 매우 도움이됩니다.

CSS 그리드는 CSS에서 가장 흥미로운 발전 중 하나가되었습니다. 가장 간단한 곳에서 가장 복잡한 웹 레이아웃을 구축하도록 설계된 CSS 도구입니다. 오늘날 CSS 그리드는 플로트를 사용하여 레이아웃을 구축하기 위해 어두운 연령대의 모든 주류 브라우저에서 널리 지원됩니다.
• 코드 편집기에 직접 CSS 그리드 레이아웃을 작성하는 것은 재미있을 수 있습니다. 사양 문서는 복잡하지만 간단한 레이아웃을 구축하는 데 필요한 주요 개념 학습 곡선은 가파르지 않습니다. Tiffany Brown의 CSS 마스터 인 Rachel Andrew 's Grid, Jen Simmons의 레이아웃 토지가 처음으로 순위를 매기면서 빠르게 시작할 수있는 많은 리소스가 있습니다.
시각적 편집기로 레이아웃을 작성하는 데 더 익숙한 사람들에게는 시도 할 흥미로운 온라인 옵션이 있습니다.
• 다음은 테스트 할 우수한 시각적 인터페이스를 갖춘 5 가지 온라인 CSS 도구입니다. 아이디어는 다음과 같습니다. 몇 번의 클릭만으로 CSS 그리드 기반 레이아웃을 설계하고 코드를 가져 와서 실행하십시오! 이 아이디어를 테스트하고 무슨 일이 일어나는지 보자.
테스트 페이지 레이아웃
• 이 기사에서는이 간단하고 수동으로 작성된 CSS 그리드 레이아웃을 제공 할 것입니다.
Codepen Demo Link
이 레이아웃에는 중첩 구조물의 그리드 컨테이너로서 여러 HTML 컨테이너 태그가 있습니다. 최근 그리드에 추가 된 새로운 하위 그리드 기능을 사용할 수 있었지만 글을 쓰는 시점에서 Firefox 69만이이를 지원하며 여기에서 논의 된 온라인 생성기 중 어느 것도이 기능을 구현하지 않습니다.

대부분의 CSS 그리드 생성기의 경우 개별 카드의 그리드 컨테이너 역할을하는 ​​ 요소에 테스트를 중점을 둡니다. 코드는 다음과 같습니다.

.kitties > ul {
  /* grid styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

속성의 값은 미디어 쿼리 없이만 응답 성을 추가 할 수 있습니다.

grid-template-columns CSS 그리드의 함수와 속성을 ​​사용하십시오. 원하는만큼 열을 추가 할 수 있으며, 그 너비는 무엇이든 그리드의 너비에 완벽하게 맞습니다.

함수를 사용하여 각 열이 320px 너비 이상인지 확인하므로 작은 화면에서도 잘 표시 될 수 있습니다.
• repeat() 대부분의 CSS 그리드 생성기에는 위의 CSS 그리드 기능을 사용하여 auto-fit를 설정하는 기능이 포함되어 있지 않으므로 미디어 쿼리 조정 도구를 사용하여 레이아웃에 응답 성을 추가해야합니다.
CSS 그리드 생성기 도구를 사용하려고 할 때 위의 코드를 각 도구에서 생성 한 코드로 바꾸고 화면에 표시된 결과를 기반으로 기능을 확인합니다. 목록의 네 번째 CSS 그리드 생성기를 제외하고 (Masaya Kazama의 VUE 기반 도구). 헤더 및 바닥 글을 포함하여 전체 레이아웃을 몇 번의 클릭과 사전 설정 레이아웃 중 하나에 약간 조정하여 전체 레이아웃을 매우 직접적으로 빠르게 구축 할 수 있기 때문입니다.
• 좋아요, 시작하자! minmax()
(다음은 원본 텍스트와 일치하지만 언어와 표현이 조정 된 그림 및 코드 펜 링크를 포함하여 5 개의 CSS 그리드 생성기에 대한 자세한 평가입니다.

(그림 및 코드 펜 링크를 포함하여 5 개의 CSS 그리드 생성기에 대한 자세한 평가를 여기에 삽입해야 함) 결론

grid-template-columns 시각화 도구를 사용하여 기본 CSS 그리드 레이아웃을 신속하게 만들 수있는 방법을 찾고 있다면 CSS 그리드 생성기가 매우 편리합니다. 이 도구는 일반적으로 놀라운 CSS 그리드 기능을 모두 제공하지는 않습니다. 내가 나열한 5 가지 도구 중 Dmitrii Bykov의 CSS 그리드 생성기만이 사양에 자세히 설명 된 대부분의 기능을 구현하고 원래 작성된 버전을 수동으로 완벽하게 재생할 수 있습니다.

마지막으로 온라인 생성기를 사용할 때 CSS 그리드의 기본 사항을 이해하는 것이 도움이 될 것입니다. 그러나 CSS 그리드에 대해 더 많이 알수록, 특히 더 대담한 레이아웃 디자인을 시도 할 때이 시각적 편집자가 더 서투른 것입니다.

(CSS 그리드 생성기에 대한 자주 묻는 질문은 여기에 삽입되어야합니다. 여기에는 원본 텍스트와 일치하지만 언어와 표현은 조정됩니다)

위 내용은 5 슈퍼 CSS 그리드 생성기 레이아웃 용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!