Layout Examples

Simple Wrap Layout.jsx

// https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/ 
const Tile = styled.aside`
  padding: 25px;
  border: 2px solid #e4e4e4;
  border-radius: 5px;
`;

// Flex
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-background
const TileContainer = styled.section`
  display: flex;
  flex-flow: row wrap;
  gap: 25px;
  
  // With flex you have to set config on the children
  >* {
    flex: 1 400px; // don't wrap till min of 400px is hit
  }
`;

// Grid - set config at the container level
// https://css-tricks.com/snippets/css/complete-guide-grid/#aa-introduction
const TileContainer = styled.section`
  display: grid;
  column-gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  row-gap: 0.5em;
`;