CODEWITHSUNDEEP
htmlcss
i am jack's wasted life
i am jack's wasted life

Reputation: 247

1px gap in row using CSS Grid

I'm trying to make a custom css grid:

.row
  box-sizing: border-box
  background-color: tomato
  font-size: 0
.row:after
  content: ""
  display: table
  clear: both
[class*="col-"]
  float: left
  min-height: 1px
  box-sizing: border-box
.col-1-4
  width: 25%
.col-3-4
  width: 75%
.col-2-3
  width: 66.66667%
.col-1-3
  width: 33.33333%

But when I'm zooming page a 1px gap appear in the end of row: Image

So how can this be avoided?

Upvotes: 1

Views: 1605

Answers (1)

Marvin
Marvin

Reputation: 10092

Probably it is just a rounding error. See also: Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

You can avoid this by giving the last column in a row width: auto.

Upvotes: 1

Related Questions