Layoutit網格：通過發電機視覺學習CSS網格

Layoutit Grid 是一款交互式的開源CSS Grid 生成器。它允許您繪製設計並在過程中查看代碼。您可以與代碼交互，添加或刪除軌道線並拖動它們來更改大小——您會實時看到CSS 和HTML 的變化！

完成佈局後，您可以創建CodePen 或獲取代碼來啟動您的下一個項目。該工具將代碼置於首位，幫助您在直接使用CSS Grid 的過程中學習它。

CSS Grid：一種全新的佈局思維方式

我們現在可以為我們的Web 體驗創建強大的響應式佈局。我們終於可以學習使用一套連貫的佈局工具進行設計，而不是死記硬背一堆技巧來強制元素定位。

當然，這並不是說這樣的生成器可以讓我們不必了解我們編寫的代碼。我們都應該學習CSS Grid 和Flexbox 的工作原理。即使您的強項是JavaScript，擁有紮實的CSS 知識基礎在表達您的想法時也是一個強大的盟友。在在線沙箱中共享組件原型、UX 交互甚至算法時，工作呈現方式會產生很大影響。開發合適的佈局——並定義創建它們的樣式——是基礎性的。

在CSS 中製作佈局不應該是令人畏懼的任務。 CSS Grid 實際上非常有趣！例如，使用命名網格區域感覺就像在紙上繪製設計的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 Grid 構建內容的一小部分。規範非常靈活。區域也可以直接使用行號或名稱來放置，或者可以由瀏覽器隱式放置，內容會自動分佈在網格內。並且規範還在不斷發展，增加了諸如子網格之類的功能。

與此同時，使用網格可能很困難，就像任何需要新思維方式的事情一樣。理解這類事情需要大量時間。而幫助做到這一點的一種方法是……

邊玩邊學

學習CSS Grid 時，很容易被它的符號和語義嚇倒。在您養成一些肌肉記憶之前，使用視覺和交互式工具啟動學習過程可以成為克服早期恐懼的絕佳方法。我們很多人在學習如何創建陰影、漸變、Markdown 表格等等時都使用過生成器。如果精心構建，生成器是很好的學習輔助工具。

讓我們使用Layoutit Grid 來重新創建我們示例中的相同設計。

打開Layoutit Grid 這樣的生成器並非旨在永久依賴；它們是墊腳石。這個特定的生成器通過幾次點擊將您的設計具體化，並附帶相應的代碼，幫助您體驗CSS Grid 的強大功能。這為您提供了推動學習過程所需的早期成功。對我們中的一些人來說，生成器會永久保留在我們的工具箱中。不是因為我們不知道如何手工製作佈局，而是因為擁有視覺反饋循環可以幫助我們快速將想法轉換為代碼。所以我們繼續使用它們。

Sarah Drasner 還創建了一個值得關注的CSS Grid 生成器。

通過構建學習

Leniolabs 最近開源了Layoutit Grid 並添加了新功能，例如交互式代碼視圖、區域編輯、歷史記錄和離線支持。並且還有更多功能正在開發中。

在GitHub 上查看如果您有改進工具的想法，請與我們聯繫！打開一個問題，讓我們在GitHub 上討論它。進入元領域，您還可以通過幫助我們構建工具來了解CSS Grid 規範。

我們使用該應用程序來跟踪創建高性能交互式Web 體驗的最佳實踐。它現在由新發布的Vue 3 驅動，使用組件構建，並使用Vite（一種新的開發工具，在開發過程中不會捆綁應用程序），這使我們在開發過程中能夠獲得即時反饋。如果您感到好奇並想與我們一起構建，請分叉存儲庫，讓我們一起學習！

以上是Layoutit網格：通過發電機視覺學習CSS網格的詳細內容。更多資訊請關注PHP中文網其他相關文章！