Title: Autogrid
Author: Andreslav
Published: <strong>2024 年 2 月 10 日</strong>
Last modified: 2024 年 10 月 20 日

---

搜尋外掛

![](https://ps.w.org/autogrid/assets/banner-772x250.jpg?rev=3052333)

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://ps.w.org/autogrid/assets/icon.svg?rev=3034037)

# Autogrid

 由 [Andreslav](https://profiles.wordpress.org/andreslav/) 開發

[下載](https://downloads.wordpress.org/plugin/autogrid.2.0.7.zip)

[即時預覽](https://tw.wordpress.org/plugins/autogrid/?preview=1)

 * [詳細資料](https://tw.wordpress.org/plugins/autogrid/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/autogrid/#reviews)
 * [開發資訊](https://tw.wordpress.org/plugins/autogrid/#developers)

 [技術支援](https://wordpress.org/support/plugin/autogrid/)

## 外掛說明

Autogrid is a block for the WordPress block editor that allows you to create adaptive
columns. The elements inside it are automatically distributed into columns, filling
the available space.

The order of customization

 1. Set the maximum number of columns and their minimum width, after reaching which
    the cells will be redistributed.
 2. Specify the size of spacing between cells and their padding. These parameters can
    be configured adaptively, for example by setting min. the size of the container
    when the value should be applied.
 3. If necessary, set the width of certain cells by specifying the number of columns
    they should occupy. You can specify the minimum and maximum number of columns to
    be displayed when the value should be applied.
 4. Done! Test.

## 螢幕擷圖

[⌊Example of Autogrid block⌉⌊Example of Autogrid block⌉[

Example of Autogrid block

[⌊Autogrid Block Settings⌉⌊Autogrid Block Settings⌉[

Autogrid Block Settings

[⌊Autogrid block cell Settings⌉⌊Autogrid block cell Settings⌉[

Autogrid block cell Settings

[⌊Autogrid block cell Settings⌉⌊Autogrid block cell Settings⌉[

Autogrid block cell Settings

[⌊How the Autogrid block looks on the site⌉⌊How the Autogrid block looks on the 
site⌉[

How the Autogrid block looks on the site

## 適用於區塊編輯器

這個外掛提供 2 個可供區塊編輯器使用的區塊。

 *   Autogrid Autogrid Block. The elements inside this block are automatically distributed
   in columns, filling the available space.
 *   Autogrid Item Autogrid Block Item.

## 常見問題集

### What browsers are supported?

The grid works well in modern browsers: Chrome 79+, Firefox 76+, Edge 79+, Safari
16+.

Adaptability starts working only with: Chrome 106+, Firefox 110+, Edge 106+, Safari
16+.

The information is obtained based on a comparison of the support of the CSS features
used: [CSS Grid](https://caniuse.com/css-grid), [CSS math function min()](https://caniuse.com/?search=min()),
[CSS function repeat()](https://caniuse.com/?search=repeat()), [CSS Container Queries](https://caniuse.com/css-container-queries).

### Are the adaptability settings working strangely?

The Min and Max values in the adaptivity settings “Spacing between cells” and “Padding
of cells” are set in px and indicate the width of the Autogrid container, not the
width of the viewport.

The Min and Max values in the adaptability settings of the “Cell Size” are set in
integers and literally indicate the number of columns displayed when the rule should
be applied.

### Where can I see the source code?

You can check out the source files on [Github](https://github.com/Andreslav/autogrid).

### Where can I test the plugin without installing it on my site?

The plugin can be tried on a free dummy site from TasteWP. To create a fictitious
website with the Autogrid plug-in installed, follow the link: [https://tastewp.org/plugins/autogrid](https://tastewp.org/plugins/autogrid)

## 使用者評論

![](https://secure.gravatar.com/avatar/8c0ced2ad5a0c50ec3a0903b1d1946b4309a9b5e4ed01ff7f8d40bc710f49e3e?
s=60&d=retro&r=g)

### 󠀁[I only have 2 words for this !](https://wordpress.org/support/topic/i-only-have-2-words-for-this/)󠁿

 [nick6352683](https://profiles.wordpress.org/nick6352683/) 2024 年 2 月 11 日 1
則留言

I only tested this plugin for about 10 minutes, but that was enough for me to come
here and give it my 2 word review:Pure Genius !!! Ok, some more details: Before 
this plugin in order for me to achieve some complex multi “row” layouts, with different“
cell” sizes, I have to setup multiple Columns blocks, and group them together. Even
though with the Columns setup, you have more precise control for the column sizes,
this plugin simplifies things a lot. Also, considering that this plugin is only 
75kb in size, a rare sight nowadays, I am extremely happy and impressed with this–
so far… If any issues arise, I will report back. Thank you for this plugin !

 [ 閱讀全部 1 則使用者評論 ](https://wordpress.org/support/plugin/autogrid/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈Autogrid〉的開發相關工作。

參與者

 *   [ Andreslav ](https://profiles.wordpress.org/andreslav/)

〈Autogrid〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/autogrid/contributors)
為這個外掛做出的貢獻。

[將〈Autogrid〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/autogrid)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/autogrid/)、查看
[SVN 存放庫](https://plugins.svn.wordpress.org/autogrid/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/autogrid/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/autogrid/)。

## 變更記錄

#### 2.0.7

 * Added possibility to set color for all autogrid child items at once.

#### 2.0.6

 * Fixed a bug in Safari.

#### 2.0.5

 * Fixed PHP warning and formatted .php

#### 2.0.3

 * Fixed an issue where increasing the cell spacing increases the outer margins 
   as well.
 * Updated the supported settings (supports).
 * Autogrid is now displayed correctly inside the “Group” blocks.

## 中繼資料

 *  版本 **2.0.7**
 *  最後更新 **2 年前**
 *  啟用安裝數 **10+**
 *  WordPress 版本需求 ** 6.4 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.6.7**
 *  PHP 版本需求 ** 7.0 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/autogrid/) 及 [Russian](https://ru.wordpress.org/plugins/autogrid/).
 *  [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/autogrid)
 * 標籤:
 * [auto-fill](https://tw.wordpress.org/plugins/tags/auto-fill/)[block](https://tw.wordpress.org/plugins/tags/block/)
   [columns](https://tw.wordpress.org/plugins/tags/columns/)[grid](https://tw.wordpress.org/plugins/tags/grid/)
   [layout](https://tw.wordpress.org/plugins/tags/layout/)
 *  [進階檢視](https://tw.wordpress.org/plugins/autogrid/advanced/)

## 評分

 5 星，滿分為 5 星

 *  [  1 個 5 星使用者評論     ](https://wordpress.org/support/plugin/autogrid/reviews/?filter=5)
 *  [  0 個 4 星使用者評論     ](https://wordpress.org/support/plugin/autogrid/reviews/?filter=4)
 *  [  0 個 3 星使用者評論     ](https://wordpress.org/support/plugin/autogrid/reviews/?filter=3)
 *  [  0 個 2 星使用者評論     ](https://wordpress.org/support/plugin/autogrid/reviews/?filter=2)
 *  [  0 個 1 星使用者評論     ](https://wordpress.org/support/plugin/autogrid/reviews/?filter=1)

[撰寫評分](https://wordpress.org/support/plugin/autogrid/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/autogrid/reviews/)

## 參與者

 *   [ Andreslav ](https://profiles.wordpress.org/andreslav/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/autogrid/)