README

这是一个用于Grid Elements的配置扩展。它为Grid Elements提供了一个干净的配置，使其符合TYPO3 Core最佳实践。

安装

1. composer require bk2k/autogrids.
2. 在扩展管理器中安装扩展。
3. 删除EXT:gridelements静态模板！
4. 包含EXT:autogrids静态模板。

它做什么？

• 它尊重你的lib.contentElement配置。
• 它给你自己定义行为的能力。
• 它提供精简的标记。
• 它提供易于理解的模板。

它不做什么？

• 它不会直接提供响应式网格！

它生成什么？

Grid-Elements TsConfig配置

tx_gridelements.setup {
    twocolumns {
        title = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:layout.twocolumns.title
        description = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:layout.twocolumns.description
        topLevelLayout = 0
        config {
            colCount = 2
            rowCount = 1
            rows {
                1 {
                    columns {
                        1 {
                            name = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:column.1
                            colPos = 101
                        }
                        2 {
                            name = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:column.2
                            colPos = 102
                        }
                    }
                }
            }
        }
    }
}

HTML

<div class="grid-container grid-container-{layout | twocolumns}">
    <div class="grid-row grid-row-{number | 1}">
        <div class="grid-column grid-column-{colPos | 101}">
            <elements />
            ...
        </div>
        <div class="grid-column grid-column-{colPos | 102}">
            <elements />
            ...
        </div>
    </div>
</div>

它是如何工作的？

实例中添加的唯一CSS是一个简单的flexbox容器和一个列配置，确保所有元素以相同的宽度渲染。

.grid-row {
    display: flex;
}
.grid-column {
    flex-grow: 1;
    flex-basis: 0;
}

如何使网格响应式？

你只需要添加使网格按照你的要求行为的CSS。

取消默认CSS

page.includeCSSLibs.autogrids >

示例CSS

.grid-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -20px;
    margin-left: -20px;
}
.grid-column {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
}
@media (min-width: 576px) {
    .grid-container-fourcolumns > .grid-row > .grid-column {
        width: calc(100% / 2);
    }
}
@media (min-width: 992px) {
    .grid-container-fourcolumns > .grid-row > .grid-column {
        width: calc(100% / 4);
    }
}