With media queries, we can change that number at specific media screen widths. How about responsiveness?Ĭolumn-count accepts numbers which defines the number of columns as we have seen. You can try it out on the codepen (by clicking the edit option) and removing the inline-block style. If inline-block is not used on the divs, the browser might allow an element to overflow to the next column. column-rule: is a combination of column-rule-width (the rule between between the columns), column-rule-style (the style of the rule) and column-rule-color (the color of the rule).column-gap: this specifies the spaces between the columns.We'll be maximizing the benefits of the positive integer in this article. inherit: specifies that the property should be inherited from the parent element.auto: which is default value specifies the number of columns based on other properties. This way, all the content in your columns is visually aligned down the left side.integer: a positve integer greater than or equal to 0 used to specify the number of columns.This property allows us to specify the number of columns a container would have and the browser will try to allocate spaces for the elements while maintaining the three columns. Talk about responsiveness as a piece of cake. Yes, they make complex layouts achievable, do the hardwork for us, perfectly center align our elements (justify-content and align-items to the rescue □) and they are amazing abstractions, but CSS offers a lot of simple-to-use tools which you might also consider.Ĭolumn-count is one powerful, simple-to-use and not so popular tool that helps achieve some of our design desires. But mind me say that, responsiveness is not all about grids and flexbox. floats inline-blocks and so on are slowly fading in its usage for layouts. Whenever we think of responsive or amazing layouts, grids of flexbox are our first options.
0 Comments
Leave a Reply. |