Page Grid

Description

This is an easy to use wrapper for CSS Grid with some transitions built in. If you need something more custom, you should just make your own grid.

This comes in two components, Grid and GridItem.

The Grid is the main component and will take accept properties to customize is responsiveness and layout. The GridItem is just a wrapper for each of your items which will give it some nice animations but is completely optional.

Grid

Props

max_columns number 6
The maximum amount of columns to include on large screens. Defaults to 6.

min_columns number 3
The minimum amount of columns to include on small screens. Defaults to 3.

row_gap number 2
The vertical space between each row of grids in rem values. Defaults to 2.

column_gap number 2
The horizontal space between each row of grids in rem values. Defaults to 2.

style string
You can pass a string of css values to further customize the grid.

<script>
  import { Grid, GridItem } from "bubbles-ui";
  import img from "./app_icon.png";
</script>

<Grid max_columns={8} min_columns={3} row_gap={2} column_gap={2}>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
  <GridItem>
    <img src={img} alt="logo" />
  </GridItem>
</Grid>

<style>
  img {
    filter: drop-shadow(0 0 1rem rgb(0 0 0 / 0.2));
    transition: all 0.4s ease-in-out;
  }

  img:hover {
    transform: scale(1.1);
    cursor: pointer;
  }
</style>