[Grid] - Support a "container" for the grid system

[mikeni]

Looking at the front page of the showcase in the docs,
https://react-md.mlaursen.com/discover-more/showcases

it seems to use materialize
https://bredariol.be/

and in
https://bredariol.be/product?
it is using react-md

I'm looking to do a fixed with container layout like the front page, is that possible out of the box with react-md?

if not, what are you guys using to achieve that? My app is primarily targeting desktop.

[fkhadra]

Hey @mikeni,

I'm migrating the old code base written in Phpto react-md. It will be released this month.

The home page for the new version:

What do you mean by fixed with container? Centered layout ?

[mikeni]

there is a max width for container at certain responsive widths, kinda like the picture you posted, you see how the 3 columns are part of a container that has a max width?

basically fixed layout

[fkhadra]

Indeed. I created a simple container class for that:

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (min-width: 400px) {
    .container {
        width: 85%;
        padding: 0;
    }
}

@media (min-width: 550px) {
    .container {
        width: 80%;
    }
}

I did the following:

<div className="md-grid container">
      <div className="md-cell md-cell--4">
        <div>
          <div className="md-text-center home__icon">
            <FontIcon iconClassName="fa fa-globe"/>
          </div>
          <h2 className="md-text-center">Une Découverte</h2>

          <p className="md-font-light">
            Les Passions de Péronnes proposent de vous faire découvrir des vins
            de terroirs, des vins de vignerons. Ceux-ci étant, pour la plupart,
            rencontrés lors de périples oeno-touristiques, nous racontant leurs
            vins, leurs espoirs quelques fois très fous.
          </p>
        </div>
      </div>
      <div className="md-cell md-cell--4">
        <div>
          <div className="md-text-center home__icon">
            <FontIcon iconClassName="fa fa-group"/>
          </div>
          <h2 className="md-text-center">Une Expérience Partagée</h2>
          <p className="md-font-light">
            Choisir son vin pour la bonne occasion, une joie pour certains, un
            casse-tête pour d’autres. Nous vous conseillerons donc pour vos
            accords “mets et vins”, mais aussi en fonction de vos goûts et de
            votre palais.
          </p>
        </div>
      </div>
      <div className="md-cell md-cell--4">
        <div>
          <div className="md-text-center home__icon">
            <FontIcon iconClassName="fa fa-thumbs-o-up"/>
          </div>
          <h2 className="md-text-center">Un commerce Equitable</h2>
          <p className="md-font-light">Nous trouvons un compromis ( le juste
            prix ) entre le vigneron
            devant vivre de sa production de vins et le client œnophile voulant
            acquérir “son vin” à un prix raisonnable auprès du négociant.</p>
        </div>
      </div>
    </div>

[mikeni]

ah ok, I'm wondering why material frameworks usually don't have this, most are mobile focused. Material-ui, react-md, etc don't have it, but older frameworks like semantic-ui and bootstrap do

[fkhadra]

I don't know too.
@mlaursen what do you think if react-md had something like

.md-grid--centered{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (min-width: 400px) {
    .md-grid--centered{
        width: 85%;
        padding: 0;
    }
}

@media (min-width: 550px) {
    .md-grid--centered{
        width: 80%;
    }
}

md-grid--centered will act as a modifier for md-grid.

<div className="md-grid md-grid--centered">
//component
</div>

Just an idea.

Edit: I can work on a PR is you want.

[mlaursen]

I normally just use the md-text-container as my centered grids, but I do think another configurable one might be helpful.

If you can make something that will allow the breakpoints and widths to be dynamic/configurable, I'll be happy for a PR! (I'd also prefer the name md-grid--container to go with the other naming schemes if possible)

[fkhadra]

I forgot about md-text-container !

Thanks for the input. I'll start to think how to implement it.