CODEWITHSUNDEEP
csssass
Mendes
Mendes

Reputation: 18451

HTML SASS simple grid system placing items incorrectly

I'm trying to build a simple grid system using SASS:

app.scss:

.row,
.col {
  box-sizing: border-box;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.col {
  position: relative;
  float: left;
}

.col + .col {
  margin-left: 1.6%;
}

.col-1 {
  width: 6.86666666667%;
}

.col-2 {
  width: 15.3333333333%;
}

.col-3 {
  width: 23.8%;
}

.col-4 {
  width: 32.2666666667%;
}

.col-5 {
  width: 40.7333333333%;
}

.col-6 {
  width: 49.2%;
}

.col-7 {
  width: 57.6666666667%;
}

.col-8 {
  width: 66.1333333333%;
}

.col-9 {
  width: 74.6%;
}

.col-10 {
  width: 83.0666666667%;
}

.col-11 {
  width: 91.5333333333%;
}

.col-12 {
  width: 100%;
}

@media only screen and (max-width: 550px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: auto;
    float: none;
  }

  .col + .col {
    margin-left: 0;
  }
}


// Body
body {
    font-family: $default-font;
    font-weight: normal;
    font-size: 13px;
    color: $text-default;
}

.app {
    width: auto;
    height: 100%;
    border-style: outset;
    border-width: 1px;
    padding: 5px;
}

header-container.scss:

@import '../App/App.scss';

.header-container {
    border-style: outset;
    border-width: 1px;
    border-radius: 5px;
    padding: 10px;
}

My HTML:

<header className='header-container'>
    <div className='row'>
        <div className='col-2'>
            <p>Person 1</p>
        </div>
        <div className='col-2'>
            <p>Person 2</p>
        </div>
    </div>
</header>

Person 1 is appearing above Person 2, not at the side as I expect the grid to work. I cannot find out what's wrong, but I think I'm missing something basic.

Upvotes: 0

Views: 114

Answers (2)

Amaury Hanser
Amaury Hanser

Reputation: 3456

For now, your col-2 class doesn't make your div float:left;

Two possibilities:

  • You add the class col to your divs
  • You set all the class starting with col to float:left; You can do it this way: [class^="col"] { float:left; }

Well, I hadn't seen that you are using className and not class, so you can change it accordingly: [className^="col"] { float:left; }

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

You're missing .col on the column elements

.row, .col {
  box-sizing: border-box;
}

.row:before, .row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.col {
  position: relative;
  float: left;
}

.col + .col {
  margin-left: 1.6%;
}

.col-1 {
  width: 6.86666666667%;
}

.col-2 {
  width: 15.3333333333%;
}

.col-3 {
  width: 23.8%;
}

.col-4 {
  width: 32.2666666667%;
}

.col-5 {
  width: 40.7333333333%;
}

.col-6 {
  width: 49.2%;
}

.col-7 {
  width: 57.6666666667%;
}

.col-8 {
  width: 66.1333333333%;
}

.col-9 {
  width: 74.6%;
}

.col-10 {
  width: 83.0666666667%;
}

.col-11 {
  width: 91.5333333333%;
}

.col-12 {
  width: 100%;
}

@media only screen and (max-width: 550px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: auto;
    float: none;
  }

  .col + .col {
    margin-left: 0;
  }
}

// Body
body {
  font-family: $default-font;
  font-weight: normal;
  font-size: 13px;
  color: $text-default;
}

.app {
  width: auto;
  height: 100%;
  border-style: outset;
  border-width: 1px;
  padding: 5px;
}

.header-container {
  border-style: outset;
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;
}
<header class='header-container'>
  <div class='row'>
    <div class='col col-2'>
      <p>Person 1</p>
    </div>
    <div class='col col-2'>
      <p>Person 2</p>
    </div>
  </div>
</header>

Upvotes: 1

Related Questions