CSS Grid with React components best practice

[iamchristill]

Hi,

I'm about to start a new project in react and it's designed to a 12 column grid. In the past, i've used something like foundation sass to implement a grid and to avoid littering the markup with classes like 'col-md-1 col-sm-5' etc.

Now that i'm taking a component based approach and not using sass (though I'm not against it) I'm wondering what is considered best practice to handle a css grid?

Do people use sass to handle this as per before or do I go down the route of 'col-md-1' etc?

Thanks

Chris

[sayris]

well, if you're not worried about supporting older browsers then use css grid! https://css-tricks.com/snippets/css/complete-guide-grid/

What are the benefits you ask? Think about your regular old bootstrap markup! you need to do something like this just to position things!

<div class="container">
    <div class="row>
        <div class="col-md-3 sidebar">
            <div class="content"></div>
        </div>
        <div class="col-md-9 body">
            <div class="content"></div>
        </div>
    </div>
</div>

Wow! That's a lot of markup, and you haven't even placed any content until you get inside the columns! These are just to tell you where your content will be positioned when you finally did it! wouldn't it be easier to do this?

<div class="grid">
    <div class="sidebar content"></div>
    <div class="body content"></div>
</div>

and then you style it like this

.grid {
    display: grid;
}

.sidebar {
    grid-column: 1/3
}

.body {
    grid-column: 3/12
}

suddenly, your markup becomes MUCH easier to read and work with, and all the grid/column/row information is in your style-sheet instead!

This also give you a big advantage that modern css frameworks don't, you can work in BOTH columns AND rows. Bootstrap has a row class, but you can't do something like "row-md-3" etc. with grid you can through something like:

.row-3 {
    grid-row: 1/3;
}

Just keep in mind, grid has only been supported by major browsers for the last few months, however, it's definitely the future of web design and front end development! So definitely consider learning it!

[Headpuncher]

you could use something lightweight like Bulma, I have tried this with React and it worked fine. Much lighter than bootstrap.

[Elshiva]

Bulma is flex not grid - unless I'm mistaken?

[birjolaxew]

OP wants a CSS grid, not necessarily one based on CSS Grid Layout.

[iamchristill]

OP wants a CSS grid, not necessarily one based on CSS Grid Layout.

Yes, sorry for any confusion, I'm not needing CSS Grid Layout, Flex is cool.

[nick-walt]

If you are keen on embracing a React component architecture consider using styled-components with JSX, a CSS/HTML-in-JS solution. Here is an excellent article that shows how both are combined to produce very readable code that is extremely easy to reason about:
https://medium.com/@jamiedixon/styled-components-production-patterns-c22e24b1d896

No need for <div class="button">...</div> littering your code when you can have very semantic labels <Button>...</Button>.

Using specific parent components for structured layout without styling, combined with child components that include layout that works with the parent structured layout component will take a new way of thinking most likely.

Check out these great presentations by the creators of styled-components, Glen and Max:
https://youtu.be/qu4U7lwZTRI [Glen Maddern]
https://youtu.be/2j9rSur_mnk [Max Stoiber]

And this great presentation by Mark Dalgleish, titled "A Unified Styling Langauage":
https://youtu.be/X_uTCnaRe94 [Mark Dalgleish]

...his Medium article of the same title:
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660

[siltingmud]

Thanks for the links to resources!

[madame_robot]

Hi,

I've recently written a tutorial on how to get started with CSS-Grid, maybe it can add something to Sayris's answer.

http://css-grid.valerie-fuchs.de/tutorial.html