Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Grids

1x1

Section titled “1x1”
class Grids1Example extends StatelessWidget {
  const Grids1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8',
        children: [
          for (var i = 0; i < 2; i++)
            const Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}

1x2

Section titled “1x2”
class Grids2Example extends StatelessWidget {
  const Grids2Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8',
        children: const [
          Style('h-32 rounded bg-gray-300'),
          Style('h-32 rounded bg-gray-300 lg:col-span-2'),
        ],
      ),
    );
  }
}

2x1

Section titled “2x1”
class Grids3Example extends StatelessWidget {
  const Grids3Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8',
        children: const [
          Style('h-32 rounded bg-gray-300 lg:col-span-2'),
          Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}

1x1x1

Section titled “1x1x1”
class Grids4Example extends StatelessWidget {
  const Grids4Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8',
        children: [
          for (var i = 0; i < 3; i++)
            const Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}

1x1x1x1

Section titled “1x1x1x1”
class Grids5Example extends StatelessWidget {
  const Grids5Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8',
        children: [
          for (var i = 0; i < 4; i++)
            const Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}

1x1x2

Section titled “1x1x2”
class Grids6Example extends StatelessWidget {
  const Grids6Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8',
        children: const [
          Style('h-32 rounded bg-gray-300'),
          Style('h-32 rounded bg-gray-300'),
          Style('h-32 rounded bg-gray-300 lg:col-span-2'),
        ],
      ),
    );
  }
}

2x1x1

Section titled “2x1x1”
class Grids7Example extends StatelessWidget {
  const Grids7Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8',
        children: [
          const Style('h-32 rounded bg-gray-300 lg:col-span-2'),
          for (var i = 0; i < 2; i++)
            const Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}

1x2x1

Section titled “1x2x1”
class Grids8Example extends StatelessWidget {
  const Grids8Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8',
        children: const [
          Style('h-32 rounded bg-gray-300'),
          Style('h-32 rounded bg-gray-300 lg:col-span-2'),
          Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}

Sidebar left

Section titled “Sidebar left”
class Grids9Example extends StatelessWidget {
  const Grids9Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-[120px_1fr] lg:gap-8',
        children: [
          for (var i = 0; i < 2; i++)
            const Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}

Sidebar right

Section titled “Sidebar right”
class Grids10Example extends StatelessWidget {
  const Grids10Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'p-6',
      child: Style(
        'grid grid-cols-1 gap-4 lg:grid-cols-[1fr_120px] lg:gap-8',
        children: [
          for (var i = 0; i < 2; i++)
            const Style('h-32 rounded bg-gray-300'),
        ],
      ),
    );
  }
}