.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}什麼是 CSS 網格產生器?
CSS 網格產生器是 CSS 網格佈局的視覺化建構器。您可以選擇所需的列和行數,為每個軸選擇軌道大小,設定間隙和對齊,以及即時預覽網格重新排列。產生您所看到內容的確切 CSS 位於下面的可複製框中,因此您永遠不必手動編寫網格模板列或在腦海中計算分數單位。
CSS網格是一個二維佈局模型。與沿著單軸放置項目的 Flexbox 不同,網格同時控制行和列。容器透過一小組屬性來保存結構:網格模板列和網格模板行定義軌道,間隙增加它們之間的間距,並證明項目、對齊項目、證明內容和對齊內容位置項目和軌道。該工具在一個面板中公開這些屬性並立即顯示結果。
生成器對具有多個磁軌的任何軸使用重複 () 函數,因此網格模板列:重複 (3, 1fr) 是對於等列的三列網格而不是重複列表所得到的。 fr 單位代表容器中可用空間的一小部分,這就是網格佈局流暢的原因:三個 1fr 列各佔寬度的三分之一,並隨著容器的大小而回流。您也可以混合使用軌道大小選單中的自動、最小內容、最大內容和固定像素軌道。
一切都完全在您的瀏覽器中運行。沒有註冊,沒有上傳任何內容,一旦頁面加載,該工具就會保持離線工作。它既可以作為學習輔助工具,因為您可以觀看每個屬性如何更改佈局,也可以作為為圖庫、儀表板、卡片佈局或整頁 shell 產生可生產網格 CSS 的快速方法。產生的規則針對。grid-container 類別,僅列出具有可見效果的屬性,因此輸出保持乾淨。
如何使用CSS網格產生器?
設定列和行
選擇網格應有多少列和行,並觀看預覽建立儲存格。
選擇軌道尺寸
選擇列和行的大小,例如 1fr、自動、最小內容或固定像素值。
調音間隙和對齊
設定行和列間隙,然後調整對齊並對齊以定位項目和軌道。
複製 CSS
複製產生的網格規則並將其貼到樣式表中,或繼續調整預覽。
主要特點
即時預覽
當您更改列、行、軌道大小、間隙和對齊時,真實的網格會重新流動。
重複輸出
多軌軸使用 repeat () 來表示簡短、可讀的網格模板值,而不是重複清單。
fr 和內容軌道
為每個軸選擇分數單位、自動、最小含量、最大含量或固定像素。
單獨的行和列間隙
獨立設定間隙;工具自動發出間隙速記或單一值。
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!