
## 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


When working with CSS modules, there are times global classes need to be styled. The `:global` operator does just that.

To target a single class, it can be passed as an argument to the operator:
```scss
:global(.class_name) {
  // CSS Rules for ".class_name"
}
```

This can be nested in a module class to only apply it to elements with the global class within the module e.g.:
> File: `MyComponent.module.scss`
```scss
.my_component {
  // Module rules

  :global(.class_name) {
    // These rules will be under:
    // ".MyComponent_my_component__##### .class_name"
  }
}
```

Further to this, module classes can also be nested within the global class:
> File: `MyComponent.module.scss`
```scss
.my_component {
  // Module rules

  :global(.class_name) {
    // These rules will be under:
    // ".MyComponent_my_component__##### .class_name"

    .my_component_element {
      // These rules will be under:
      // ".MyComponent_my_component__##### .class_name .MyComponent_my_component_element__#####"
    }
  }
}
```


## Multiple Classes
If there are multiple classes that need to be tarted, a `:global` block can be used:
```scss
:global {
  .this_class_is_global {
    // Some rules for ".this_class_is_global"
  }

  .this_class_is_also_global {
    // Some rules for ".this_class_is_also_global"
  }
}
```

When using `sass`, this also can be used to import another file, for example to qualify a libraries classes under a module
> File: `MyComponent.module.scss`
```scss
@use "sass:meta";

.my_component {
  :global {
    // This will qualify all imported styles as:
    // ".MyComponent_my_component_##### {library classes / selectors}"
    @include meta.load-css("library/styles/file");
  }
}
````


Posts tagged "scss"

CSS Equal Width Elements

Global Styles in CSS Modules