레이아웃 그리드 : CSS 그리드 학습 발전기로 시각적으로 학습

레이아웃 그리드는 대화식 오픈 소스 CSS 그리드 생성기입니다. 이를 통해 프로세스에서 디자인을 그리고 코드를 볼 수 있습니다. 코드와 상호 작용하고 트랙 라인을 추가 또는 제거하여 크기를 변경하도록 드래그 할 수 있습니다. CSS 및 HTML의 변경 사항이 실시간으로 표시됩니다!

레이아웃이 완료되면 코드펜을 만들거나 다음 프로젝트를 시작할 코드를 가져올 수 있습니다. 이 도구는 코드를 먼저 배치하고 CSS 그리드를 직접 사용하는 동안 학습하는 데 도움이됩니다.

CSS 그리드 : 새로운 사고 방식

이제 웹 경험을위한 강력한 반응 형 레이아웃을 만들 수 있습니다. 우리는 마침내 요소 포지셔닝을 강제하기 위해 많은 트릭을 암기하는 대신 일관된 레이아웃 도구로 디자인하는 법을 배울 수 있습니다.

물론, 이것은 그러한 생성기가 우리가 쓰는 코드를 이해하지 못하게 할 수 있다고 말하는 것은 아닙니다. 우리는 모두 CSS 그리드와 Flexbox의 작동 방식을 배워야합니다. 당신의 강한 요점이 JavaScript이더라도, 확실한 CSS 지식 기반을 갖는 것은 당신의 아이디어를 표현할 때 강력한 동맹국입니다. 온라인 샌드 박스에서 구성 요소 프로토 타입, UX 상호 작용 및 알고리즘을 공유 할 때 작업 방법이 큰 영향을 미칩니다. 올바른 레이아웃을 개발하고 스타일을 만들기 위해 스타일을 정의하는 것은 기본입니다.

CSS에서 레이아웃을 만드는 것이 어려운 작업이되어서는 안됩니다. CSS 그리드는 실제로 매우 재미 있습니다! 예를 들어, 이름이 지정된 그리드 영역을 사용하면 종이에 디자인의 ASCII 아트 버전을 그리는 것 같습니다. 사진 응용 프로그램의 레이아웃을 만들어 봅시다. 주로 사진과 사람을 나란히 표시하고 일반적인 헤더, 바닥 글 및 구성 사이드 바를 표시하겠습니다.

 <code>.photos-app { /* 为我们的应用程序布局，让我们将内容放在网格中*/ display: grid; /* 我们想要3 列和3 行，这些是使用`fr`（剩余空间的一部分）的响应式轨道大小*/ grid-template-columns: 20% 1fr 1fr; grid-template-rows: 0.5fr 1.7fr 0.3fr; /* 让我们稍微分开一下轨道*/ gap: 1em; /* 我们现在有3x3 个单元格，这就是每个部分放置的位置*/ grid-template-areas:  "header header header"  /* 顶部行中延伸的页眉*/  "config photos people"  /* 左侧边栏和我们的应用程序内容*/  "footer footer footer"; /* 底部行的页脚 */ } .the-header { /* 在每个部分中，让我们定义我们用来引用区域的名称*/ grid-area: "header"; }</code>

이것은 CSS 그리드로 구축 할 수있는 것의 작은 부분 일뿐입니다. 사양은 매우 유연합니다. 영역은 또한 줄 번호 나 이름으로 직접 배치하거나 브라우저에서 암시 적으로 배치 할 수 있으며 컨텐츠는 그리드 내에 자동으로 배포됩니다. 서브 그리드와 같은 기능이 추가되어 사양이 여전히 발전하고 있습니다.

동시에, 그리드를 사용하는 것은 새로운 사고 방식이 필요한 것처럼 어려울 수 있습니다. 그런 것들을 이해하는 데 많은 시간이 걸립니다. 그리고 이것을 돕는 한 가지 방법은…

연주하는 동안 배우십시오

CSS 그리드를 학습 할 때는 상징과 의미론에 의해 쉽게 위협받을 수 있습니다. 근육 기억을 개발하기 전에 시각적 및 대화식 도구로 학습 과정을 시작하는 것은 초기 두려움을 극복하는 훌륭한 방법이 될 수 있습니다. 우리 중 많은 사람들이 그림자, 그라디언트, 마크 다운 테이블 등을 만드는 방법을 배울 때 발전기를 사용했습니다. 신중하게 구성되면 발전기는 훌륭한 학습 원조입니다.

레이아웃 그리드를 사용하여 본 예제에서 동일한 디자인을 재현합시다.

레이아웃 그리드와 같은 열기 생성기는 영구적으로 의존하지 않습니다. 그들은 디딤돌입니다. 이 특정 생성기는 몇 번의 클릭으로 디자인을 구체화하고 CSS 그리드의 전력을 경험하는 데 도움이되는 해당 코드와 함께 제공됩니다. 이것은 학습 과정을 추진하는 데 필요한 초기 성공을 제공합니다. 우리 중 일부는 발전기가 도구 상자에 영구적으로 남아 있습니다. 우리가 손으로 레이아웃을 만드는 방법을 모르기 때문이 아니라 시각적 피드백 루프를 사용하면 아이디어를 코드로 빠르게 변환하는 데 도움이 될 수 있습니다. 그래서 우리는 그것들을 계속 사용합니다.

Sarah Drasner는 또한 주목할만한 CSS 그리드 발전기를 만들었습니다.

건축을 통해 학습

Leniolabs는 최근 레이아웃 그리드를 열었고 대화식 코드보기, 영역 편집, 기록 및 오프라인 지원과 같은 새로운 기능을 추가했습니다. 개발 중에 더 많은 기능이 있습니다.

도구 개선에 대한 아이디어가 있으시면 Github에서 확인하십시오. 저희에게 연락하십시오! 질문을 열고 Github에서 논의합시다. Metafield에 들어가면 도구 구축을 돕고 CSS 그리드 사양에 대해 배울 수도 있습니다.

우리는이 응용 프로그램을 사용하여 고성능 대화 형 웹 경험을 만들기위한 모범 사례를 추적합니다. 이제 구성 요소를 사용하여 구축 된 새로 출시 된 VUE 3에 의해 구동되며 개발 중에 응용 프로그램을 번들이 아닌 새로운 개발 도구 인 Vite를 사용하여 개발 중에 즉각적인 피드백을받을 수 있습니다. 당신이 호기심이 많고 우리와 함께 만들고 싶다면 저장소를 포크하고 함께 배우자!

위 내용은 레이아웃 그리드 : CSS 그리드 학습 발전기로 시각적으로 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!