How to place cols at the center of a row in MaterializeCSS?

user_2235936 0
Viewed 694

I'm trying to create a grid using MaterializeCSS, and should place each col at the center of row, but now the cols all start from left of row.

And I add a display:flex into row, but it actually breaks the responsiveness, that means if I squeeze the width of my browser, I observe no responsiveness of the row & col.

Code as follows, please help.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

    <div class="container">
      <div class="row" style="border:1px solid black;display:flex">
        <div class="col s12 m3">
          abc
        </div>
        <div class="col s12 m3">
          abc
        </div>
        <div class="col s12 m3">
          abc
        </div>
      </div>
    </div>

materialize css html
1 Answers

If I understand you correctly you need to use an offset on the first col, but your maths is a little off.

Materialize uses a 12 column grid and % based layout, not flex. Setting size-3 on a column (s3, m3, l3) says 'take up 25%', because 12/3 is 4, or 25%.

So in your scenario, your content is 75% of the container - and to center this using the grid, you'd need 12.5% either side. Not possible.

Three solutions:

1. Force your 3 columns to take up all available space equally:

<div class="col s12 m4"></div>

<div class="col s12 m4"></div>

<div class="col s12 m4"></div>

2. Use an offset

This means shrinking your content columns down from 3 (25%) to 2 (16.7%). This is so we can have even space either side - an offset of 3 columns, and then empty space the other side.

<div class="col s12 m2 offset-m3"></div>

<div class="col s12 m2"></div>

<div class="col s12 m2"></div>

4. Use flex and a media query.

The Materialize grid uses % and margin:auto for spacing. We'd need to override this when we hit the m breakpoint (> 600px).

.flex-row {
  @media (min-width:600px) {
    display: flex;
    justify-content: center;
    align-items: center;

    > .col.m3 {
      margin-left:0;
    }
  }
}

Codepen here.

https://materializecss.com/grid.html#offsets

user_58583950
Related