# CSS in React Components

**URL:** <https://forum.kirupa.com/t/css-in-react-components/636807>\
**Category:** programming\
**Created:** [June 24, 2017, 1:59pm UTC](https://forum.kirupa.com/t/css-in-react-components/636807 "2017-06-24T13:59:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![iviolini](https://avatars.discourse-cdn.com/v4/letter/i/c77e96/32.png) [@iviolini](https://forum.kirupa.com/u/iviolini)\
**Post date:** [June 24, 2017, 1:59pm UTC](https://forum.kirupa.com/t/css-in-react-components/636807/1 "2017-06-24T13:59:01Z")

</div>

When styling React components, where is the best place to include “layout” based css like Flexbox or CSS grid — in the main CSS file or with the component. As an example, in the color swatches exercise would if you called `display:grid` on the container, would you assign grid elements in the component. I have tried it a few ways, but haven’t gotten it to work yet.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 24, 2017, 9:02pm UTC](https://forum.kirupa.com/t/css-in-react-components/636807/2 "2017-06-24T21:02:10Z")

</div>

If you are not going to be porting your app to React Native (where you can only use Flexbox currently), put your layout code in the main CSS file. Much simpler 🙂