[WordPress] 外掛分享: GM Adaptive CSS Grid Columns

WordPress 外掛 GM Adaptive CSS Grid Columns 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「GM Adaptive CSS Grid Columns」是 2023-03-24 上架。
  • 目前尚無安裝啟用數,是個很新的外掛。如有要安裝使用,建議多測試確保功能沒問題!
  • 上一次更新是 2024-06-01,距離現在已有 337 天。
  • 有 2 人給過評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

picsta | orionaselite |

外掛標籤

bricks | oxygen | css grid | Breakdance | css columns |

內容簡介

總結:GM Adaptive CSS Grid Columns 是一個輕量且簡單易用的 WordPress 擴充外掛,可以幫助所有想在網站上輕鬆設置最大 Grid 數量的人。不需要知道 CSS,並保證外掛輕量化,不會影響網頁速度。使用時需要注意只有當你正確識別並針對父元素及其直接子元素時,才能正確使用此外掛。建議使用 Bricks、Oxygen 和 Breakdance 作為頁面構建器。

問題與答案:
- GM Adaptive CSS Grid Columns 外掛的功能是什麼?
此外掛可以幫助所有想在網站上輕鬆設置最大 Grid 數量的人。你也可以設置少於等於所定義的列數,在自動計算欄位的百分比,例如 33.3%、50% 或 100% 的可用寬度。
- 如何使用這個外掛?
使用該外掛的設置很簡單,只需要將兩個 CSS 類別添加到你的元素中,外掛就會自動進行魔法。確保將以下類別添加到容器和直接子元素。為避免與預定義的樣式發生衝突,使用 DIV 而不是 section、container 或 block。
- Parent/Container Element class: grid-container
- Child Element class: grid-item
此外,還提供一個多餘的 CSS 類別 grid-center,通過在你的父元素(容器)上使用此類別,可以實現三件事情。 1. 容器將居中顯示在頁面上;2、添加所需的寬度(以 rem 為單位);3、在所有斷點上添加水平間距。
- 如果我不熟悉 CSS,能使用這個外掛嗎?
當然可以!尤其對初學者和非程式設計師來說,這個外掛會讓你愛上它。
- 此外掛使用會影響網頁速度嗎?
不會。外掛已經保持了輕量化,並且默認情況下 CSS 已壓縮。
- 有沒有使用此外掛的建議?
為了讓外掛能正確工作,建議要正確識別和針對父元素及其直接子元素。此外,建議使用 Bricks、Oxygen 和 Breakdance 作為頁面構建器。

原文外掛簡介

Who can benefit from the plugin GM Adaptive CSS Grid Columns? (Short: GM Grid)
The plugin is made to help everyone who wants to have an easy, lightweight and worry-free solution to set up a maximum grid count on their website.
Of course, you can have fewer columns as those you have defined. They will automatically take the right percentage like 33.3%, 50% or even 100% of the available width.
Do I have to know CSS?
Absolutely not! Especially beginners and non-coders will start to love this plugin soon.
Hold on, not another plugin, what happens to my page speed?
Don’t panic, we took care of this by keeping this plugin lightweight and the CSS is minified by default.
Important Notice:
The plugin only works if you correctly identify and target the parent, and it’s direct child elements. Otherwise, the plugin can’t work.
Recommended page builder are Bricks, Oxygen and Breakdance.
How to use:
The setup is quite simple. Basically, you just add two CSS classes to your elements and the plugin does the magic for you.
Make sure to add the following classes to the container and direct child elements. Use a DIV instead of a section, container, or block
to avoid conflicting predefined styles.
Parent/Container Element class: grid-container
Child Element class: grid-item
Additionally, there is one more CSS class available. By using grid-center on your parent (container) element, you achieve three things.
1. The container will be centred on the page
2. Add your desired width (in rem)
3. Add horizontal spacing across all break points
Minimum Setup:

Define the maximum column count for your medium and large screen size.
Add the desired gap size (in rem)
Define the medium and large breakpoint (in em).
Save!

Quick overview of GM Adaptive CSS Grid Columns by Imran Siddiq

Translations
GM Adaptive CSS Grid Column can be used in these different languages thanks to the following translators:

Afrikaans George Nicolaou
German Michael Kellersmann
Greek George Nicolaou

各版本下載點

  • 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「GM Adaptive CSS Grid Columns」來進行安裝。

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | 1.0.5 | trunk |

延伸相關外掛(你可能也想知道)

  • DivUp Content 》注意:此外掛原本是為了解決將傳統編輯器內容分割成 div,使用簡短代碼的問題。於 2022 年 9 月 27 日,我測試了此外掛與 Gutenberg 的相容性,因為 div 在 G...。

文章
Filter
Mastodon