### Grid Layout Component

Grid component'i için iki farklı senaryo düşünüyorum.
<small><code>type="flex"</code></small> ve <small><code>type="grid"</code></small> bu sayede, <small>'flex'</small> tipinde bir grid sonsuz sayıda ızgara oluşturabilirken, <small>'grid'</small> ise 12'lik düzende standart ızgara yapısı kullanımına imkan verebilir.

@type: flex

<bcm-grid type="flex" direction="horizontal|vertical">
    <bcm-row>
        <bcm-col>lorem ipsum</bcm-col>
        <bcm-col>lorem ipsum</bcm-col>
        <bcm-col>lorem ipsum</bcm-col>
        <bcm-col>lorem ipsum</bcm-col>
        <bcm-col>lorem ipsum</bcm-col>
    </bcm-row>
    <bcm-row>
        <bcm-col>lorem ipsum</bcm-col>
        <bcm-col>lorem ipsum</bcm-col>
    </bcm-row>
</bcm-grid>

@type: grid

<bcm-grid type="grid">
    <bcm-row>
        <bcm-col span="2">lorem ipsum</bcm-col>
        <bcm-col span="4">lorem ipsum</bcm-col>
        <bcm-col span="3">lorem ipsum</bcm-col>
        <bcm-col span="3">lorem ipsum</bcm-col>
    </bcm-row>
</bcm-grid>

Tabi bu yüzeysel bir çalışma. CSS kuralları, <small><code>Shadow DOM Encapsulation</code></small> geçerli olduğunda işe yaramayacak gibi görünüyor. (tam emin değilim bununla ilgili detaylı bir deneme yapıyorum). Örneğin,

<style>
#test p {
    margin-bottom: 20px;
}
</style>

<bcm-grid type="grid" id="test">
    <bcm-row>
        <bcm-col span="6">
            <p>Lorem ipsum dolor sit amet..</p>
        </bcm-col>
    </bcm-row>
</bcm-grid>

Ek olarak, nedenini tam anlayamamakla birlikte (tahminim web componentlerin style yönetiminin yalıtılmış olması), Carbon ve diğer büyük webcomponent geliştiren ekipler, grid'ler için component kullanımından vazgeçmiş. Bunu CSS olarak dışarı veriyorlar,

- https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#how-it-works
- https://github.com/nuclei/grid
- https://github.com/leodido/matrix-layout (Burada farklı bir yöntemle çözüm bulunulmuş)

Componentleri enkapsüle ederek UI standartlarımızı koruma altına almamız güzel, ama bir çok üçüncü parti jQuery veya javascript kütüphanesi, içlerinde HTML Dom'unu kontrol ediyor. Bu yüzden bazı kütüphaneler için de problem yaratabilir.