Magento Expert Forum - Improve your Magento experience

Results 1 to 12 of 12

What is the use of column layout in CSS?

  1. #1

  2. #2
    Junior Member
    Join Date
    Mar 2016
    Location
    india
    Posts
    138
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do.

  3. #3

  4. #4
    Junior Member
    Join Date
    Sep 2016
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The CSS multi-column layout uses new CSS properties which allow designers to break a layout into blocks. The two main properties which control the number of columns are: column-count and column-width.

  5. #5
    Junior Member
    Join Date
    Aug 2016
    Posts
    42
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

  6. #6
    Junior Member
    Join Date
    Sep 2016
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML--

    <div id="col">Enter text here..</div>

    CSS --

    #col {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    }

    Corporate Gifts

  7. #7
    New member
    Join Date
    Nov 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The column-count property specifies the number of columns an element should be divided into.

    The following example will divide the text in the <div> element into 3 columns:

    Example
    div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    }

  8. #8

  9. #9
    Junior Member
    Join Date
    Sep 2016
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    }

    Corporate Gifts | Customized Pen Drives

  10. #10
    Junior Member
    Join Date
    Oct 2016
    Posts
    104
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    Reading very long lines of text can be problematic for some people. They will have to focus more on not missing a line instead of the text itself. This problem is easily solved by using multiple columns to lay out the content.

    The CSS Multi-column Layout Module features enable us to recreate the same kind of multi-column effect on websites. The CSS multi-column layout extends the block layout mode to allow the easy definition of multiple columns of text.

  11. #11
    New member
    Join Date
    Nov 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Flexbox is a new layout mode in CSS3.
    Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.
    Learn more about flexbox in our CSS Flexbox chapter.

  12. #12
    Junior Member
    Join Date
    Mar 2015
    Posts
    255
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Column layout helps to found the no of columns, gap between columns and specify how to fill columns.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •