CSS 그리드 등록 정보가 Griddy.io와 함께 작동하는 방법 알아보기

웹 디자인 기술에 대해 잘 알고 있다면 CSS 그리드에 대해 알아야합니다. 이러한 속성은 다음과 같습니다. CSS3 형식의 새로운 추가 개발자의 가장 친한 친구가 되려고합니다..

최근 CSS 그리드 속성을 익히는 데 도움이되는 재미있는 게임을 다루었지만 게임이 항상 실용적인 아이디어를 가르치는 것은 아닙니다. Griddy가 더 유용 할 수있는 곳입니다..

이 무료 웹 응용 프로그램을 사용하면 실시간으로 그리드를 사용자 정의하고 라이브 스 니펫을 업데이트합니다. 페이지에. 열, 거터 및 여백을 정의하고 그리드 속성의 작동 방식을 배우기 위해 페이지를 다시 구성하여 고유 한 사용자 정의 그리드를 만들 수 있습니다..

Griddy는 실제로 프론트 엔드 개발자를위한 무료 학습 도구 누가 CSS 그리드에 대해 더 알고 싶어하는지.

이 webapp를 사용하여 그리드에 새 항목을 추가하고, 다른 항목을 제거하고, 원하는 레이아웃에 맞게 크기를 조정할 수 있습니다.

webapp에는 그리드 속성 편집을위한 다른 입력 필드가있는 여러 섹션이 있습니다. 그리드 행 / 열을 다시 포맷 할 수 있으며 네가하는 일을 정확히 길을 따라.

이러한 양식 필드를 통해 열 간격을 정의하고 표 항목을 정렬하고 양쪽 맞춤 설정으로 재생할 수 있습니다. 변경 사항을 적용 할 때마다 미리보기와 아래의 작은 코드 스 니펫이 자동으로 업데이트됩니다..

이 방법을 사용하면 CSS를 복사하여 자신의 스타일 시트에 붙여 넣을 수 있습니다. 정말 멋진!

Griddy는 Grid Garden만큼 재미있는 것은 아니지만 Griddy는 배우고 배우는 실용적인 방법입니다. 시각적으로 이해하다 CSS 그리드 속성이 페이지 요소에 미치는 영향.

그걸로 놀러 가려면 Griddy 홈페이지를 방문하십시오. Twitter @drewisthe의 작성자와 생각이나 질문을 공유 할 수도 있습니다..