simple_grid #

Inspired by bootstrap , This is dynamic grid layout that you can use Like a bootstrap grid.

Explanation #

There are 3 classes that you have to now, these are:

1. SpGrid is the container of grid, more information here
2. SpGridItem is the children of SpGrid, more information here
3. SpGridSize is the class that you can declare the maximum of the screen size, more information here

Example #

SpGrid(width: MediaQuery.of(context).size.width, children: [
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.blue,
      height: 200,
    ),
  ),
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.green,
      height: 200,
    ),
  ),
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.yellow,
      height: 200,
    ),
  ),
  SpGridItem(
    xs: 12,
    sm: 6,
    md: 4,
    lg: 3,
    child: Container(
      color: Colors.purple,
      height: 200,
    ),
  ),
]);