Columns with div html

Super easy responsive Row and Columns in straight up CSS

Grid layouts are the bread and butter of web development design and chances are you’ve reached for something like Bootstrap or Foundation to make your layouts a reality. But, like most of you, I don’t have a fondness of the dependencies required to run Bootstrap or Foundation nor do I like the ding to my page load times. In fact when I use Bootstrap for an application that I am writing, I really almost only ever use it for the grid layouts, sometimes I will use it for notifications or basic fairly sensible CSS defaults, but 90% of the time, all I want is the grid layouts. I also don’t appreciate only have options of splitting columns into 12 columns or less. It feels like you sometimes have to do some crazy work arounds to get columns in columns, or strange things like that. How can we do grid layouts faster and easier? Flexbox is your answer. I think

Flexbox

At this point flexbox is pretty much everywhere. It’s supported by all major browsers. It allows for much easier layouts and is supported by React-Native which means when I layout pages for React-Native I reach for flexbox first, but I have found my self reaching for flexbox first in web development as well. In fact the last application I laid out, I did entirely with flexbox. I have found it that easy to use. If you don’t know too much about flex box. I like this page that gives a good run down of flexbox

Layout

.row  display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; > .column  display: flex; flex-direction: column; flex-basis: 100%; flex: 1; > 

 class='some-page-wrapper'>  class='row'>  class='column'>  class='blue-column'> Some Text in Column One   class='column'>  class='green-column'> Some Text in Column Two    

.some-page-wrapper  margin: 15px; background-color: red; > .row  display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; > .column  display: flex; flex-direction: column; flex-basis: 100%; flex: 1; > .blue-column  background-color: blue; height: 100px; > .green-column  background-color: green; height: 100px; > 

 class='some-page-wrapper'>  class='row'>  class='column'>  class='blue-column'> Some Text in Column One   class='column'>  class='green-column'> Some Text in Column Two   class='column'>  class='orange-column'> Some Text in Column Two    

And we get a third column added. That seamlessly nests itself in our row. Now what if we want more complicated layouts? We can just add more rows, that is pretty easy.

 class='some-page-wrapper'>  class='row'>  class='column'>  class='orange-column'> Some Text in Column One   class='column'>  class='blue-column'> Some Text in Column Two   class='column'>  class='green-column'> Some Text in Column Three    class='row 2'>  class='column'>  class='green-column'> Some Text in Row 2, Column One   class='column'>  class='orange-column'> Some Text in Row 2, Column Two   class='column'>  class='blue-column'> Some Text in Row2, Column Three    

Or we can resize our columns. To have a double column we can add a .double-column class. This can work with any sized column though, you can do 60/40, you can do 10/10/10/10/10/10/10/10/10/10, honestly any combination is possible here. You can do 1 X 100. Or 10 x 1, then 20 x 3, then 30 x 1. The options are endless! On one layout, I added a large margin around my «column» and since the row will wrap down, I have one row with as many «columns» as I need. The columns were fixed width cards so they just wrap to the next line and flexbox neatly responsively wraps the cards down the screen.

.double-column  display: flex; flex-direction: column; flex-basis: 100%; flex: 2; > 

This isn’t very responsive though? We can add some responsitivity using media queries. Just move the flex: 1 and flex: 2 into a media-query (size depends on application I’m just giving an option)

@media screen and (min-width: 800px)  .column  flex: 1 > .double-column  flex: 2 > > 

At > 800px: At < 800px: The final codepen, hint click the 1x or 0.5x buttons in the lower right corner to see the difference in the «responsive» layout. Essentially we just blew the row/columns of bootstrap out of the water with 20 lines of CSS. We have a way to create row/column layouts quickly and since we use flexbox we barely have to worry about the layouts breaking, or anything going wrong. It’s easily adapted to a wide variety of uses and allows a large amount of customizability. What do you think about flexbox? Have you tried it yet? Another hidden benefit is that if I layout React components in this way, its pretty easy to layout React-Native components very easily to look similar. I usually use SCSS in my projects so if you see something that isn’t perfect CSS let me know!

Источник

Using multi-column layouts

The properties defined in the CSS multi-column layout module extend the block layout mode , enabling the easy definition of multiple columns of text. People have trouble reading text if lines are too long. If it takes too long for the eyes to move from the end of one line to the beginning of the next, readers can lose track of which line they were on. To provide for a better user experience when reading text making use of a large screen, you should limit the width of text by using columns of text placed side by side, just as newspapers do.

Using columns

Column count and width

Two CSS properties control whether and how many columns will appear: column-count and column-width .

The column-count property sets the number of columns to a particular number. E.g.,

Example 1

HTML

div id="col"> p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. p> p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. p> p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. p> p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div> 

CSS

Result

The content will be displayed in two columns:

The column-width property sets the minimum desired column width. If column-count is not also set, then the browser will automatically make as many columns as fit in the available width.

Example 2

HTML

div id="wid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

Result

In a multi-column block, content automatically flows from one column into the next as needed. All HTML, CSS, and DOM functionality is supported within columns, as are editing and printing.

The columns shorthand

You can use either column-count or column-width . Because values for these properties do not overlap, it is often convenient to use the shorthand columns .

Example 3

In this example, the CSS declaration column-width: 12em is replaced by columns: 12em .

HTML

div id="col_short"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

Example 4

In this example, the CSS declaration column-count: 4 is replaced by columns: 4 .

HTML

div id="columns_4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

Result

Example 5

The two CSS declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em . The column-count portion of the shorthand is the maximum number of columns that will be present. The column-width is the minimum width each column should be.

HTML

div id="columns_12"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

#columns_12  columns: 12 8em; > 

Result

Assuming a default 1em gap between columns, if the container is wider than 103ems (12 columns * 8em width each + 7 1em gaps), there will be 12 columns, each with a width of 8ems or more. If the container is less than 103ems wide, there will be fewer than 12 columns. If the container is less than 17ems wide ( 8em column + 8em column + 1em gap), the content will be displayed as a single column with no column gap.

Height balancing

CSS columns require that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

Column Gaps

There is a gap between columns. The recommended default is 1em . This size can be changed by applying the column-gap property to the multi-column block:

Example 6

HTML

div id="column_gap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum div> 

CSS

#column_gap  column-count: 5; column-gap: 2em; > 

Result

Conclusion

CSS columns are a layout primitive that can help make large blocks of text easier to read when responsive content is viewed on wide viewports. Imaginative developers may find many uses for them, especially in conjunction with container queries and with the automatic height balancing feature.

Found a content problem with this page?

This page was last modified on Jun 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник