All geek questions in one place

CSS Responsive Grid 1px Problem

I am working on a flexible grid for a project. The grid consists of blocks that float on the left and have a width of 25% .

Inside this block are images that are set as 100% * height / width * or 50% * height / width *.

All the images in blocks inserted next to each other, and all the blocks are located next to each other, so it looks like a seamless grid of images.

The problem I get depends on certain browser sizes or when resizing the browser, you get a small gap of 1px between certain blocks.

An example can be seen here: http://dahliacreative.com/responsivegrid/

I think it can be up to the blocks floating, as if you are taking a popup, everything seems fine. I tried using display: inline-block , etc., but could not get anything to work!

Does anyone have an idea to fix this?

+4
source share
3 answers

This is due to the use of full round percentages, such as 50%, when you reach a certain width and height (for example, 561px * 393px), then they will not be divided by 50% evenly, therefore, this remaining gap is 1px.

Take a look at twitter bootstrap CSS to see percentages made up to 6 decimal points to avoid this problem.

+2
source

I will fix this by adding the css class to the last column, css for this class

 .your_class_for_last_column { float: left !important;} /* TO FIX 1px Foundation 5 bug fix*/
+1
source

You can use new css3 with colum clearance and number of columns.

 column-count: column-gap:

Chris made a really good example with images that are related to yours. You can do almost the same with li or table elements or so. Remember to use the prefix and does not work in IE for less than 10

http://css-tricks.com/seamless-responsive-photo-grid/

0
source

Source: https://habr.com/ru/post/1438609/

More articles:


All Articles