Understanding Colums in CSS

Hello guys.

Welcome to our CSS series.

In our last segment, we saw CSS Text Indent and Text Stroke property.

How can we move the text left and right and generate one paragraph and how can we give a stroke to the text or we can generate its outline? I hope the practical that we had performed in the last segment you have practiced on your own.

If you have any questions or queries from the last segment, you can tell us on forums.learnvern.com.

We will try to rectify all your questions and revert to you with the solutions.

Okay, guys! Let's start.

Our today's segment is on the CSS columns property.

What does column property basically do is, the column property in CSS sets the number and width of columns in a single declaration.

It's a shorthand property; means if we have some content, or a paragraph, if we don't want to show the entire content in one line, in the form of a paragraph on the contrary, we want to set it in columns.

So, with the help of CSS columns property, we can give the width and define how many columns we want to give.

We can define that in one go.

Shorthand means in one property adding multiple values and showing the output in those multiple values, like we do in border, one px solid and then we write the color.

We don't write border styles separately.

We don't write border width separately.

Don't write border color separately, we can surely write it but we don't write it, we directly write the border property which is the shorthand property of all three combined.

So, we pass the border and these three values together.

In the same way, column is also our shorthand property.

Where we can define column width and column number together, it is used to set both column count and column width properties at the same time, like I have explained, both of these properties are used to control how many columns will appear.

Means if you are defining a number, column count, it will show how many columns will appear in our output.

The column count property is used to set the number of columns whereas the column width property specifies the width of the columns.

Means column count indicates how many columns we can show and column width indicates what should be the width of our column.

Together using column count and column width properties, creating a multi column layout means more than one column layout will be generated with it’s help.

Automatically into a single column at narrower browser width without using the media queries means usually, we make use of media queries when we switch the devices.

Media query is an advanced level in CSS.

It is a topic which we will cover at the end of CSS.

Okay, guys!

But as of now, we will understand what can happen with media queries.

If I'm showing some output on my desktop but definitely if I want to show the same output on my mobile phone, the mobile’s screen width reduces.

That's the reason why we have to set it as per the mobile’s width.

If I'm showing three or four columns on a desktop screen or any bigger screen, in my mobile those four columns cannot appear. That will definitely be one column, but in one row.

Means the things that are 4 in the desktop, one next to the other.

On the mobile it is not next to each other, but one below each other.

It should break and come down so that we can get a proper output, we can properly see and read it and understand our output.

Got it?

So that's the reason the column thing that works on our desktop as it is those columns work in a phone as well, that is not necessary.

That's the reason why when we move from a desktop or from a big size screen to a smaller size screen, at that time we make use of CSS media query.

okay!

media query identifies the screen with, if it is getting narrow or smaller in size.

So, based on this size, we set the CSS.

If the screen is big, how the output should be shown.

If it is a small screen like a mobile, how to show the output.

It is not always helpful to use both of them because it can restrict responsiveness and flexibility.

Responsiveness means to adjust on the basis of screen size, if the screen size is big, how the output should look, if the screen size is small, how the output should be shown.

This is what we call responsiveness.

If we use media query and column properties together, this restricts the flexibility of both of them.

So, it is better that you don't use them both together.

If we are using columns, continue using columns, if you are using media query, then continue using media query.

clear guys!

Next is, how many values we can give using columns.

So, here you can see that in columns we can either give auto if we are not giving auto, then we can give column width or column count, these are the properties that we can give.

So, we will see both these things together.

Auto means that it is a default value which sets the value of column count and column width, to set the default browser values.

Means in auto the columns will be set automatically.

But column width and column count mean that we are explicitly passing, how many columns I require of how much width.

How many counts of columns we require for how much width columns? For this also we will perform a practical .

okay!

So, let's open Sublime Text; example, columns.

(pause)

Now, in this example we will add one paragraph, our last segment that we had taken on page break, we will open that and from that we will take the paragraph.

We don't require this paragraph.

So, we can remove this; save and reload.

So, you can see that we are getting one paragraph here now, in this we will apply the column property.

So, let's say this is my div, in this div, style, in this div and in this div; I will define columns.

Let's say, I want that there should be four columns of 100 pixels, like we have seen that we pass width and count both.

So, I've given 100 pixels and four such counts.

Let's say to define this division we will give one border like one pixel, solid, #adadad and font size, we will take 20 pixels.

We will comment the first line and we will run it.

So, you can see that we are getting one block, in that 20-pixel size we are getting a paragraph; we will add h2, example, columns. okay.(pause)

So, this is our output.

Now, we will remove the line which we had commented and run it.

So, you can see that our text that is there is in paragraph form itself.

It is coming one by one, but it is getting divided into four columns.

Like here, this Learnvern, yes this is Learnvern.

This is an amazing place to learn HTML, CSS, and Jquery.

This is an amazing place to learn HTML, CSS, and from Jquery our content is getting transferred in the second column.

Means our content is the same, it is in full paragraph form, but our content is getting divided into four columns.

But in the four columns, it still is line by line, if you want to read we can read it, but it is in four columns.

What is the column’s width? It is 100 pixels.

If I want to get this divided in six columns.

So, you can see that it is getting divided into six columns, but still our paragraph is as it is.

So, this is our column property, how we can give columns.

clear! great!

According to our slide, we have given column width and column count.

Now, in this we will also give column auto, columns auto, reload.

Now, we can see that in auto we are not getting the output, we are getting the same paragraph generated here.

So, what does the description say? It is the default value which sets the value of column count and column width to the default browser values.

It means this is our default value plus on what basis does this value set, on the browser's default value.

So, what is the current browser’s column property’s default value? it  is zero or it is one.

So, we are getting all our content in one column.

So, based on that, we can say that if we take auto you will get to one paragraph but if we remove auto and pass count and width, we will get our output generated in column view.

So, what we will do is to this div we will give class, columns four, we will generate the same div where we will write column six.

In Column four class; columns, here four and here in, column six class, column six.

In four, we are getting four and in six we're actually getting five.

This is because it is based on our content, so it is becoming 5, if I reduce this.

So, you can see that I'm now getting six and 50 pixels, which means the width was more so dividing into six was not possible for the browser.

So, we were getting five columns.

As soon as we reduce the width, we are even getting six columns as well.

So, we will give a heading here, example with four columns, example with six columns and one extra br tag here, we are getting a proper output here.

We are getting the outputs in four columns as well as in six columns.

So, this was over the columns.

So, we can define it with auto as well.

But since our browser's default value is one, we will get one paragraph and we can also explicitly give width and count and define the column.

Our example which we had performed here in the output in the same way we can give the name to the element.

Here, for example we performed the practical ones with h2, sorry through div.

After that we gave the class and performed it.

So we can take any element or any Class and in that column we can pass length and number.

So this was our column.

So, guys our today's topic of columns, If you have any question or query regarding it.

Or you are performing a practical and while performing it you're getting some doubt.

You can tell us on forums.learnvern.com.

We will try to revert to all your questions there with solutions.

Our next topic is on CSS hyphen property.

Thank you.