stacked.tsx 524 B

1234567891011121314151617181920
  1. import styled from '@emotion/styled';
  2. /**
  3. * Render all child elements directly on top of each other.
  4. *
  5. * This implementation does not remove the stack of elements from the document
  6. * flow, so width/height is reserved.
  7. *
  8. * An alternative would be to use `position:absolute;` in which case the size
  9. * would not be part of document flow and other elements could render behind.
  10. */
  11. const Stacked = styled('div')`
  12. display: grid;
  13. grid-template: 1fr / 1fr;
  14. > * {
  15. grid-area: 1 / 1;
  16. }
  17. `;
  18. export default Stacked;