ExGrid

<VBox class="sapUiMediumMargin" width="100%">

  <!-- 3 kolon temel grid -->
  <ux7:ExTitle text="3 Kolon Grid" level="h3" variant="section" />
  <ux7:ExGrid id="grid3col" columns="3" gap="16px" itemBorder="true" itemBorderColor="#e5e7eb" itemBorderRadius="8px" itemPadding="16px">
    <ux7:ExKPI title="Satış" value="12,400" unit="₺" trendDir="up" trend="+8%" color="green" />
    <ux7:ExKPI title="Sipariş" value="342" trendDir="down" trend="-3%" color="blue" />
    <ux7:ExKPI title="Kullanıcı" value="1,280" trend="0%" trendDir="neutral" color="purple" />
  </ux7:ExGrid>

  <!-- 2 kolon border + shadow -->
  <ux7:ExTitle text="2 Kolon, Border + Shadow" level="h3" variant="section" />
  <ux7:ExGrid id="grid2col" columns="2" gap="20px" border="true" borderColor="#6366f1" borderWidth="2px" borderRadius="12px" shadow="md" itemHoverEffect="true" itemBorder="true" itemPadding="20px">
    <ux7:ExCard title="Kart 1" subtitle="Grid içinde kart" shadow="false" bordered="false">
      <ux7:ExText text="İlk grid öğesi." />
    </ux7:ExCard>
    <ux7:ExCard title="Kart 2" subtitle="Grid içinde kart" shadow="false" bordered="false">
      <ux7:ExText text="İkinci grid öğesi." />
    </ux7:ExCard>
  </ux7:ExGrid>

  <!-- Gradient border + animated -->
  <ux7:ExTitle text="Gradient Border (Animated)" level="h3" variant="section" />
  <ux7:ExGrid id="gridGradient" columns="3" gap="16px" gradientBorder="true" gradientColors="#6366f1,#8b5cf6,#ec4899" gradientAnimated="true" gradientSpeed="3s" gradientAngle="90deg" itemPadding="16px">
    <ux7:ExLabel text="Öğe A" variant="primary" size="lg" />
    <ux7:ExLabel text="Öğe B" variant="success" size="lg" />
    <ux7:ExLabel text="Öğe C" variant="warning" size="lg" />
  </ux7:ExGrid>

  <!-- Responsive breakpoints -->
  <ux7:ExTitle text="Responsive (xl:4, md:2, sm:1)" level="h3" variant="section" />
  <ux7:ExGrid id="gridResponsive" columns="4" responsive="xl:4,md:2,sm:1" gap="12px" itemBorder="true" itemPadding="12px">
    <ux7:ExText text="A" align="center" weight="bold" />
    <ux7:ExText text="B" align="center" weight="bold" />
    <ux7:ExText text="C" align="center" weight="bold" />
    <ux7:ExText text="D" align="center" weight="bold" />
  </ux7:ExGrid>

</VBox>