# Container: FlexForm Ayarları

Container elemanlarına FlexForm ile arka plan rengi, boşluk ve sütun oranı gibi ek yapılandırma seçenekleri ekler.

**Projede kullanılan yapı:** `testproject` extension'ı, `grid-1col` … `grid-12cols` CType'larını b13/container v3 ile yönetir. FlexForm TYPO3 v13 uyumlu `addPiFlexFormValue` yöntemiyle kaydedilir. Ayarlar backend'de ayrı bir **"Container Settings"** sekmesi olarak görünür.

---

## Mimari Genel Bakış

```
Resources/Private/FlexForms/Container/
├── GridContainer.xml       → grid-1col, grid-3cols … grid-12cols (ortak görünüm)
└── GridTwoColumns.xml      → grid-2cols (sütun oranı + görünüm)
```

| FlexForm | Uygulanan CType'lar | Sekmeler |
|----------|---------------------|---------|
| `GridContainer.xml` | grid-1col, grid-3cols … grid-12cols | `sAppearance` (Appearance) |
| `GridTwoColumns.xml` | grid-2cols | `sColumns` (Column Settings) + `sAppearance` (Appearance) |

---

## FlexForm XML Dosyaları

### GridContainer.xml — Ortak Görünüm (1, 3–12 Sütun)

`Resources/Private/FlexForms/Container/GridContainer.xml`

#### `sAppearance` sekmesi alan listesi

| Alan | Label | Değerler |
|------|-------|---------|
| `backgroundColor` | Background Color | None, White, Gray-50/100/200, Dark Gray, Near Black, Black, Primary, Primary Light, Blue/Sky/Green/Yellow/Red Light |
| `topSpacing` | Top Spacing | None, pt-2 … pt-32 (9 seçenek) |
| `bottomSpacing` | Bottom Spacing | None, pb-2 … pb-32 (9 seçenek) |
| `leftPadding` | Left Padding | None, pl-2 … pl-24 (8 seçenek) |
| `rightPadding` | Right Padding | None, pr-2 … pr-24 (8 seçenek) |
| `columnGap` | Column Gap | gap-0, gap-1, gap-2 … gap-24 (12 seçenek) |

```xml
<?xml version="1.0" encoding="utf-8"?>
<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <sAppearance>
            <ROOT>
                <sheetTitle>Appearance</sheetTitle>
                <type>array</type>
                <el>

                    <backgroundColor>
                        <label>Background Color</label>
                        <!-- None / White / bg-gray-50 / bg-gray-100 / bg-gray-200 / bg-gray-700
                             bg-gray-900 / bg-black / bg-primary / bg-primary/10
                             bg-blue-50 / bg-sky-50 / bg-emerald-50 / bg-yellow-50 / bg-red-50 -->
                    </backgroundColor>

                    <topSpacing>
                        <label>Top Spacing</label>
                        <!-- None / pt-2 / pt-4 / pt-8 / pt-12 / pt-16 / pt-20 / pt-24 / pt-32 -->
                    </topSpacing>

                    <bottomSpacing>
                        <label>Bottom Spacing</label>
                        <!-- None / pb-2 / pb-4 / pb-8 / pb-12 / pb-16 / pb-20 / pb-24 / pb-32 -->
                    </bottomSpacing>

                    <leftPadding>
                        <label>Left Padding</label>
                        <!-- None / pl-2 / pl-4 / pl-6 / pl-8 / pl-12 / pl-16 / pl-24 -->
                    </leftPadding>

                    <rightPadding>
                        <label>Right Padding</label>
                        <!-- None / pr-2 / pr-4 / pr-6 / pr-8 / pr-12 / pr-16 / pr-24 -->
                    </rightPadding>

                    <columnGap>
                        <label>Column Gap</label>
                        <!-- gap-0 / gap-1 / gap-2 / gap-3 / gap-4 / gap-6 / gap-8
                             gap-10 / gap-12 / gap-16 / gap-20 / gap-24  (default: gap-4) -->
                    </columnGap>

                </el>
            </ROOT>
        </sAppearance>
    </sheets>
</T3DataStructure>
```

---

### GridTwoColumns.xml — Sütun Oranı + Görünüm (2 Sütun)

`Resources/Private/FlexForms/Container/GridTwoColumns.xml`

İki sekme içerir.

#### `sColumns` sekmesi — Sütun Oranları

| Değer | Label | Tailwind (12-grid) |
|-------|-------|--------------------|
| `50-50` | Equal — 50 / 50 | col-span-6 / col-span-6 |
| `66-33` | Left Wide — 66 / 33 | col-span-8 / col-span-4 |
| `33-66` | Right Wide — 33 / 66 | col-span-4 / col-span-8 |
| `75-25` | Left Extra Wide — 75 / 25 | col-span-9 / col-span-3 |
| `25-75` | Right Extra Wide — 25 / 75 | col-span-3 / col-span-9 |

`columnGap` alanı da bu sekmede bulunur (gap-0 … gap-24, 12 seçenek; default: `gap-6`).

#### `sAppearance` sekmesi

`GridContainer.xml` ile birebir aynı alanlar: `backgroundColor`, `topSpacing`, `bottomSpacing`, `leftPadding`, `rightPadding`.

---

## FlexForm TCA Kaydı

`Configuration/TCA/Overrides/tt_content.php`:

```php
// grid-2cols: sütun oranı + görünüm — "Container Settings" sekmesi olarak
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
    '*',
    'FILE:EXT:testproject/Resources/Private/FlexForms/Container/GridTwoColumns.xml',
    'grid-2cols'
);
$GLOBALS['TCA']['tt_content']['types']['grid-2cols']['showitem'] .= ',--div--;Container Settings,pi_flexform';

// Diğer tüm grid container'lar: ortak görünüm — "Container Settings" sekmesi olarak
$gridContainersWithBaseFlexForm = [
    'grid-1col', 'grid-3cols', 'grid-4cols', 'grid-5cols',
    'grid-6cols', 'grid-7cols', 'grid-8cols', 'grid-9cols',
    'grid-10cols', 'grid-11cols', 'grid-12cols',
];
foreach ($gridContainersWithBaseFlexForm as $cType) {
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
        '*',
        'FILE:EXT:testproject/Resources/Private/FlexForms/Container/GridContainer.xml',
        $cType
    );
    $GLOBALS['TCA']['tt_content']['types'][$cType]['showitem'] .= ',--div--;Container Settings,pi_flexform';
}
```

> **Not:** `addToAllTCAtypes('after:header')` yerine doğrudan `showitem` üzerine `--div--` tab ekleme yöntemi kullanılır. Bu şekilde FlexForm, General sekmesinin altındaki "Plugin Options" bloğu yerine ayrı bir üst-düzey sekme olarak görünür.

> **TYPO3 v13 notu:** `addPiFlexFormValue('*', $filePath, $CType)` — CType tabanlı kayıt için üçüncü parametre CType adıdır. TYPO3 v13'te tam desteklenmektedir.

---

## TypoScript — FlexFormProcessor Entegrasyonu

`Configuration/Sets/SitePackage/TypoScript/Container.typoscript`:

```typoscript
lib.containerBase = FLUIDTEMPLATE
lib.containerBase {
    templateRootPaths {
        10 = EXT:testproject/Resources/Private/Templates/Container/
    }
    dataProcessing {
        # FlexForm verilerini `settings` olarak Fluid'e aktar
        10 = TYPO3\CMS\Frontend\DataProcessing\FlexFormProcessor
        10 {
            as = settings
        }
        # b13/container v3: tüm colPos children'ları children_{colPos} değişkeni olarak aktarır
        100 = B13\Container\DataProcessing\ContainerProcessor
    }
}

tt_content.grid-1col < lib.containerBase
tt_content.grid-1col.templateName = OneColumn

tt_content.grid-2cols < lib.containerBase
tt_content.grid-2cols.templateName = TwoColumns

# ... grid-3cols … grid-12cols aynı şekilde
```

**Fluid'de FlexForm verisine erişim — Sheet yapısı:**

| FlexForm Alanı | Fluid Değişkeni |
|----------------|-----------------|
| `sColumns → columnRatio` | `{settings.sColumns.columnRatio}` |
| `sColumns → columnGap` | `{settings.sColumns.columnGap}` |
| `sAppearance → backgroundColor` | `{settings.sAppearance.backgroundColor}` |
| `sAppearance → topSpacing` | `{settings.sAppearance.topSpacing}` |
| `sAppearance → bottomSpacing` | `{settings.sAppearance.bottomSpacing}` |
| `sAppearance → leftPadding` | `{settings.sAppearance.leftPadding}` |
| `sAppearance → rightPadding` | `{settings.sAppearance.rightPadding}` |
| `sAppearance → columnGap` | `{settings.sAppearance.columnGap}` |

> `FlexFormProcessor` sheet adını korur → `settings.{sheetName}.{fieldName}` formatı kullanılır.

---

## Fluid Template — grid-2cols (TwoColumns.html)

`Resources/Private/Templates/Container/TwoColumns.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

{f:variable(name: 'ratio',   value: settings.sColumns.columnRatio)}
{f:variable(name: 'gap',     value: settings.sColumns.columnGap)}
{f:variable(name: 'bgColor', value: settings.sAppearance.backgroundColor)}
{f:variable(name: 'pt',      value: settings.sAppearance.topSpacing)}
{f:variable(name: 'pb',      value: settings.sAppearance.bottomSpacing)}
{f:variable(name: 'pl',      value: settings.sAppearance.leftPadding)}
{f:variable(name: 'pr',      value: settings.sAppearance.rightPadding)}

<f:switch expression="{ratio}">
    <f:case value="66-33">
        <f:variable name="col1Class" value="md:col-span-8" />
        <f:variable name="col2Class" value="md:col-span-4" />
    </f:case>
    <f:case value="33-66">
        <f:variable name="col1Class" value="md:col-span-4" />
        <f:variable name="col2Class" value="md:col-span-8" />
    </f:case>
    <f:case value="75-25">
        <f:variable name="col1Class" value="md:col-span-9" />
        <f:variable name="col2Class" value="md:col-span-3" />
    </f:case>
    <f:case value="25-75">
        <f:variable name="col1Class" value="md:col-span-3" />
        <f:variable name="col2Class" value="md:col-span-9" />
    </f:case>
    <f:defaultCase>
        <f:variable name="col1Class" value="md:col-span-6" />
        <f:variable name="col2Class" value="md:col-span-6" />
    </f:defaultCase>
</f:switch>

<div class="grid-container grid-2cols {bgColor} {pt} {pb}">
    <div class="bido-container {f:if(condition: pl, then: pl)} {f:if(condition: pr, then: pr)}">
        <div class="grid grid-cols-1 md:grid-cols-12 {f:if(condition: gap, then: gap, else: 'gap-6')}">
            <div class="column col-1 {col1Class}">
                <f:for each="{children_201}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="column col-2 {col2Class}">
                <f:for each="{children_202}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
        </div>
    </div>
</div>

</html>
```

### Diğer Container Şablonları (1, 3–12 sütun)

`GridContainer.xml` ile tek sekme (`sAppearance`) sunar. Şablon değişken kalıbı:

```html
{f:variable(name: 'bgColor', value: settings.sAppearance.backgroundColor)}
{f:variable(name: 'pt',      value: settings.sAppearance.topSpacing)}
{f:variable(name: 'pb',      value: settings.sAppearance.bottomSpacing)}
{f:variable(name: 'pl',      value: settings.sAppearance.leftPadding)}
{f:variable(name: 'pr',      value: settings.sAppearance.rightPadding)}
{f:variable(name: 'gap',     value: settings.sAppearance.columnGap)}

<div class="grid-container grid-Ncols {bgColor} {pt} {pb}">
    <div class="bido-container {f:if(condition: pl, then: pl)} {f:if(condition: pr, then: pr)}">
        <div class="grid grid-cols-1 md:grid-cols-N {f:if(condition: gap, then: gap, else: 'gap-4')}">
            <!-- kolonlar... -->
        </div>
    </div>
</div>
```

---

## Kurulum Sonrası Zorunlu Adımlar

```bash
ddev exec vendor/bin/typo3 cache:flush
ddev exec vendor/bin/typo3 extension:setup
```

Backend'de container öğesi düzenlendiğinde **"Container Settings"** sekmesi görünmelidir. grid-2cols için **"Column Settings"** ve **"Appearance"** alt sekmeleri, diğerleri için sadece **"Appearance"** alt sekmesi gelir.

---

## Sorun Giderme

| Sorun | Çözüm |
|-------|-------|
| "Container Settings" sekmesi gözükmüyor | `cache:flush` + `extension:setup` çalıştır |
| FlexForm alanları boş geliyor | `addPiFlexFormValue` kaydını ve XML dosya yolunu kontrol et |
| Sütun oranı uygulanmıyor | `lib.containerBase`'de `FlexFormProcessor` (index 10) eklendiğini doğrula |
| `children_201` boş | b13/container v3 `ContainerProcessor` kayıtlı mı, backend colPos ayarı doğru mu kontrol et |
| FlexForm parse hatası | XML dosyasında geçersiz karakter ya da tag var mı kontrol et (`xmllint` ile doğrula) |

---

## Kaynaklar

- [b13/container README](https://github.com/b13/container/blob/master/README.md)
- [TYPO3 v13 FlexForm API](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/FlexForms/)
- [TYPO3 FlexFormProcessor](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/DataProcessing/FlexFormProcessor.html)


---

## Mimari Genel Bakış

```
Resources/Private/FlexForms/Container/
├── GridContainer.xml       → grid-1col, grid-3cols … grid-12cols (ortak görünüm)
└── GridTwoColumns.xml      → grid-2cols (sütun oranı + görünüm)
```

| FlexForm | Uygulanan CType'lar | İçerik |
|----------|---------------------|--------|
| `GridContainer.xml` | grid-1col, grid-3cols … grid-12cols | Arka plan, boşluk, yatay dolgu, sütun arası boşluk |
| `GridTwoColumns.xml` | grid-2cols | Sütun oranı, sütun arası boşluk + görünüm ayarları |

---

## FlexForm XML Dosyaları

### GridContainer.xml — Ortak Görünüm (1, 3–12 Sütun)

`Resources/Private/FlexForms/Container/GridContainer.xml`

```xml
<?xml version="1.0" encoding="utf-8"?>
<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <sAppearance>
            <ROOT>
                <sheetTitle>Görünüm</sheetTitle>
                <type>array</type>
                <el>

                    <backgroundColor>
                        <label>Arka Plan Rengi</label>
                        <config>
                            <type>select</type>
                            <renderType>selectSingle</renderType>
                            <items>
                                <numIndex index="0"><label>Yok</label><value></value></numIndex>
                                <numIndex index="1"><label>Açık Gri</label><value>bg-gray-100</value></numIndex>
                                <numIndex index="2"><label>Beyaz</label><value>bg-white</value></numIndex>
                                <numIndex index="3"><label>Koyu</label><value>bg-gray-900</value></numIndex>
                                <numIndex index="4"><label>Marka Rengi</label><value>bg-primary</value></numIndex>
                            </items>
                            <default></default>
                        </config>
                    </backgroundColor>

                    <verticalSpacing>
                        <label>Üst / Alt Boşluk</label>
                        <config>
                            <type>select</type>
                            <renderType>selectSingle</renderType>
                            <items>
                                <numIndex index="0"><label>Yok</label><value></value></numIndex>
                                <numIndex index="1"><label>Küçük (py-8)</label><value>py-8</value></numIndex>
                                <numIndex index="2"><label>Orta (py-16)</label><value>py-16</value></numIndex>
                                <numIndex index="3"><label>Büyük (py-24)</label><value>py-24</value></numIndex>
                            </items>
                            <default></default>
                        </config>
                    </verticalSpacing>

                    <horizontalPadding>
                        <label>Yatay Dolgu</label>
                        <config>
                            <type>select</type>
                            <renderType>selectSingle</renderType>
                            <items>
                                <numIndex index="0"><label>Varsayılan (px-5)</label><value>px-5</value></numIndex>
                                <numIndex index="1"><label>Yok (px-0)</label><value>px-0</value></numIndex>
                                <numIndex index="2"><label>Geniş (px-10)</label><value>px-10</value></numIndex>
                            </items>
                            <default>px-5</default>
                        </config>
                    </horizontalPadding>

                    <columnGap>
                        <label>Sütun Arası Boşluk</label>
                        <config>
                            <type>select</type>
                            <renderType>selectSingle</renderType>
                            <items>
                                <numIndex index="0"><label>Yok (gap-0)</label><value>gap-0</value></numIndex>
                                <numIndex index="1"><label>Küçük (gap-3)</label><value>gap-3</value></numIndex>
                                <numIndex index="2"><label>Orta (gap-6)</label><value>gap-6</value></numIndex>
                                <numIndex index="3"><label>Büyük (gap-8)</label><value>gap-8</value></numIndex>
                                <numIndex index="4"><label>Çok Büyük (gap-12)</label><value>gap-12</value></numIndex>
                            </items>
                            <default>gap-3</default>
                        </config>
                    </columnGap>

                </el>
            </ROOT>
        </sAppearance>
    </sheets>
</T3DataStructure>
```

### GridTwoColumns.xml — Sütun Oranı + Görünüm (2 Sütun)

`Resources/Private/FlexForms/Container/GridTwoColumns.xml`

2 sekme içerir: `sColumns` (sütun oranı ve boşluk), `sAppearance` (görünüm).

**`sColumns` sekmesi — Sütun Oranları:**

| Değer | Ad | Tailwind Sınıfları (12-grid) |
|-------|----|-----------------------------|
| `50-50` | Eşit | col-span-6 / col-span-6 |
| `66-33` | Sol Geniş | col-span-8 / col-span-4 |
| `33-66` | Sağ Geniş | col-span-4 / col-span-8 |
| `75-25` | Sol Çok Geniş | col-span-9 / col-span-3 |
| `25-75` | Sağ Çok Geniş | col-span-3 / col-span-9 |

---

## FlexForm TCA Kaydı

`Configuration/TCA/Overrides/tt_content.php`:

```php
// grid-2cols: sütun oranı + görünüm
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
    '*',
    'FILE:EXT:testproject/Resources/Private/FlexForms/Container/GridTwoColumns.xml',
    'grid-2cols'
);
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
    'tt_content',
    'pi_flexform',
    'grid-2cols',
    'after:header'
);

// Diğer tüm grid container'lar: ortak görünüm
$gridContainersWithBaseFlexForm = [
    'grid-1col', 'grid-3cols', 'grid-4cols', 'grid-5cols',
    'grid-6cols', 'grid-7cols', 'grid-8cols', 'grid-9cols',
    'grid-10cols', 'grid-11cols', 'grid-12cols',
];
foreach ($gridContainersWithBaseFlexForm as $cType) {
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue(
        '*',
        'FILE:EXT:testproject/Resources/Private/FlexForms/Container/GridContainer.xml',
        $cType
    );
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
        'tt_content',
        'pi_flexform',
        $cType,
        'after:header'
    );
}
```

> **TYPO3 v13 notu:** `addPiFlexFormValue('*', $filePath, $CType)` — CType tabanlı kayıt için üçüncü parametre CType adıdır. Bu yöntem TYPO3 v13'te tam olarak desteklenmektedir.

---

## TypoScript — FlexFormProcessor Entegrasyonu

`Configuration/Sets/SitePackage/TypoScript/Container.typoscript`:

```typoscript
lib.containerBase = FLUIDTEMPLATE
lib.containerBase {
    templateRootPaths {
        10 = EXT:testproject/Resources/Private/Templates/Container/
    }
    dataProcessing {
        # FlexForm verilerini `settings` olarak Fluid'e aktar
        10 = TYPO3\CMS\Frontend\DataProcessing\FlexFormProcessor
        10 {
            as = settings
        }
        # b13/container v3: tüm colPos children'ları children_{colPos} değişkeni olarak otomatik aktarır
        100 = B13\Container\DataProcessing\ContainerProcessor
    }
}

tt_content.grid-2cols < lib.containerBase
tt_content.grid-2cols.templateName = TwoColumns
# ... diğer container'lar aynı şekilde
```

**Fluid'de FlexForm verisine erişim — Sheet yapısı:**

| FlexForm Alanı | Fluid Değişkeni |
|----------------|-----------------|
| `sColumns → columnRatio` | `{settings.sColumns.columnRatio}` |
| `sColumns → columnGap` | `{settings.sColumns.columnGap}` |
| `sAppearance → backgroundColor` | `{settings.sAppearance.backgroundColor}` |
| `sAppearance → verticalSpacing` | `{settings.sAppearance.verticalSpacing}` |
| `sAppearance → horizontalPadding` | `{settings.sAppearance.horizontalPadding}` |

> `FlexFormProcessor` sheet adını korur → `settings.{sheetName}.{fieldName}` formatı kullanılır.

---

## Fluid Template — grid-2cols (TwoColumns.html)

`Resources/Private/Templates/Container/TwoColumns.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

{f:variable(name: 'ratio',   value: settings.sColumns.columnRatio)}
{f:variable(name: 'gap',     value: settings.sColumns.columnGap)}
{f:variable(name: 'bgColor', value: settings.sAppearance.backgroundColor)}
{f:variable(name: 'spacing', value: settings.sAppearance.verticalSpacing)}
{f:variable(name: 'px',      value: settings.sAppearance.horizontalPadding)}

<!-- Sütun oranı → Tailwind col-span sınıfları (12-grid üzerinden) -->
<f:switch expression="{ratio}">
    <f:case value="66-33">
        <f:variable name="col1Class" value="md:col-span-8" />
        <f:variable name="col2Class" value="md:col-span-4" />
    </f:case>
    <f:case value="33-66">
        <f:variable name="col1Class" value="md:col-span-4" />
        <f:variable name="col2Class" value="md:col-span-8" />
    </f:case>
    <f:case value="75-25">
        <f:variable name="col1Class" value="md:col-span-9" />
        <f:variable name="col2Class" value="md:col-span-3" />
    </f:case>
    <f:case value="25-75">
        <f:variable name="col1Class" value="md:col-span-3" />
        <f:variable name="col2Class" value="md:col-span-9" />
    </f:case>
    <f:defaultCase>
        <!-- Varsayılan: 50/50 -->
        <f:variable name="col1Class" value="md:col-span-6" />
        <f:variable name="col2Class" value="md:col-span-6" />
    </f:defaultCase>
</f:switch>

<div class="grid-container grid-2cols {bgColor} {spacing}">
    <div class="bido-container {f:if(condition: px, then: px, else: 'px-5')}">
        <div class="grid grid-cols-1 md:grid-cols-12 {f:if(condition: gap, then: gap, else: 'gap-6')}">
            <div class="column col-1 {col1Class}">
                <f:for each="{children_201}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
            <div class="column col-2 {col2Class}">
                <f:for each="{children_202}" as="child">
                    <f:format.raw>{child.renderedContent}</f:format.raw>
                </f:for>
            </div>
        </div>
    </div>
</div>

</html>
```

### Diğer Container Şablonları (3–12 sütun)

Ortak görünüm ayarları `GridContainer.xml` ile tek sekme (`sAppearance`) sunar. Şablon değişkenleri:

```html
{f:variable(name: 'bgColor', value: settings.sAppearance.backgroundColor)}
{f:variable(name: 'spacing', value: settings.sAppearance.verticalSpacing)}
{f:variable(name: 'px',      value: settings.sAppearance.horizontalPadding)}
{f:variable(name: 'gap',     value: settings.sAppearance.columnGap)}

<div class="grid-container grid-Ncols {bgColor} {spacing}">
    <div class="bido-container {f:if(condition: px, then: px, else: 'px-5')}">
        <div class="grid grid-cols-1 md:grid-cols-N {f:if(condition: gap, then: gap, else: 'gap-3')}">
            <!-- kolonlar... -->
        </div>
    </div>
</div>
```

---

## Kurulum Sonrası Zorunlu Adımlar

```bash
# TCA ve FlexForm kayıtlarını etkinleştir
ddev exec vendor/bin/typo3 cache:flush
ddev exec vendor/bin/typo3 extension:setup
```

Backend'de container öğesi düzenlendiğinde **"Sütun Ayarları"** ve **"Görünüm"** sekmeleri görünmelidir.

---

## Sorun Giderme

| Sorun | Çözüm |
|-------|-------|
| FlexForm sekmesi backend'de gözükmüyor | `cache:flush` + `extension:setup` çalıştır |
| `settings.sColumns.columnRatio` boş geliyor | `addPiFlexFormValue` kaydını kontrol et |
| Sütun oranı uygulanmıyor | `lib.containerBase`'de `FlexFormProcessor` (index 10) eklendiğini doğrula |
| `children_201` boş | b13/container v3 `ContainerProcessor` kayıtlı mı, container backend colPos ayarı doğru mu kontrol et |

---

## Kaynaklar

- [b13/container README](https://github.com/b13/container/blob/master/README.md)
- [TYPO3 v13 FlexForm API](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/FlexForms/)
- [TYPO3 FlexFormProcessor](https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Fluidtemplate/DataProcessing/FlexFormProcessor.html)
