
## Parent Expanding to the Size of Child Elements
```scss
.container {
  display: grid;
  // Fits columns to the available space, with a min width of 100px
  // and a max width of 1 fraction of the container
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  min-width: 150px;
}
```

## Child Elements Filling Parent
```scss
.container{
  display: flex;
  gap: 8px;
  min-width: 150px;

  .child {
    // flex: {flex-grow} {flex-shrink} {flex-basis}
    // Using flex-basis of 0, all elements have the same starting point
    flex: 1 1 0;
  }
}
```

## References
- [[StackOverflow] How to make flexbox items the same size?](https://stackoverflow.com/questions/29503227/how-to-make-flexbox-items-the-same-size)
- [[MDN] CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
- [[CSS-Tricks] Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/)

CSS Equal Width Elements

- [Window Size Changes](#window-size-changes)
- [Watching a Specific Element for Size Changes](#watching-a-specific-element-for-size-changes)
- [React Hook](#react-hook)
- [References](#references)

----

## Window Size Changes
If it your logic based off of the window size and not specific element sizing, an event listener can be added to the window for the `resize` event with:
```typescript
const callback = (evt: UIEvent) => console.log(evt);
window.addEventListener('resize', callback);
```

When done, be sure to remove the event listener with:
```typescript
window.removeEventListener('resize', callback);
```

## Watching a Specific Element for Size Changes
For cases where a specific element's size needs to be known, a `ResizeObserver` can be used. This is helpful for when the window doesn't resize but a element's size does (e.g. reflow due to content being added or removed).

To watch an element, the following can be used:
```typescript
const testDiv = document.getElementById('test');
const callback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => console.log(entries);
const resizeObserver = new ResizeObserver(callback);
resizeObserver.observe(testDiv);
```

When done watching an element, it can be unobserved using:

```typescript
// Only stop watching a single element
resizeObserver.unobserve(testDiv);

// Or Alternatively, all elements can be unobserved using:
resizeObserver.disconnect();
```

## React Hook
This hook is a general purpose resize hook. It can be used to track the resizing of a specific element or when the window itself is resized.

If `elementToWatch` isn't passed, the whole window will be watched for resize events.

```typescript
import { useEffect } from 'react';

/**
 * Hookup a resize listener to the window or a target element
 * @param {() => void} callback The callback to call on resize (should be memoized with `useCallback` to avoid re-registering each render)
 * @param {boolean} callOnMount Whether to trigger the callback on mount
 * @param {HTMLElement | undefined} elementToWatch The element to watch for size changes
 */
export default function useOnResize(
  callback: () => void,
  callOnMount: boolean = false,
  elementToWatch?: HTMLElement,
) {
  useEffect(() => {
    // Watch a particular element if specified
    if (elementToWatch) {
      const resizeObserver = new ResizeObserver(callback);
      resizeObserver.observe(elementToWatch);
      if (callOnMount) {
        callback();
      }

      return () => {
        resizeObserver.disconnect();
      };
    }

    // If no element is specified, watch for window size changes
    window.addEventListener('resize', callback);
    if (callOnMount) {
      callback();
    }
    return () => {
      window.removeEventListener('resize', callback);
    };
  }, [callback, callOnMount, elementToWatch]);
}

```


## References
- [[MDN] ResizeObserver
](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [[MDN] Window: resize event
](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event)



Posts tagged "layout"

CSS Equal Width Elements

Monitor for Resize in JavaScript