Thread by @Prathkum

Web Layout 🖼

Structuring your website is essential as it provides better navigation and visualization of the content available on the site. Let's talk a little more about it and learn how we can create a proper layout

🧵👇🏻

Web layout aims for presenting imformation in a logical manner and to make the important elements stand out.

A well designed layout can catch more traffic on your website and make your content easy to understand

📌 Design vs Layout?

Web layout is closely related to designing part. But we can say that web designing is much more than the layout only. It covers images, text, color scheme, typography and layout

On the other hand, Layout is all about arrangement of element on the webpage

📌 How to make a layout

The oldest way of creating layouts is using HTML <table> tags. Tables are having column and rows so you can make use of it. But this method is out dated as now we have CSS which can handle layout

In CSS, you can create layouts using multi methods. For example positioning concept is also a method of achieving layout but its hard.

Its hard to handle the responsiveness of layout in different screen sizes if we use Position property

We have a better way

Flex and grid CSS layout. The flexible box(flexbox) layout is one dimensional whereas the Grid layout is 2 dimensional

📌 Dimensions in CSS layout

You can arrange content on a webpage in row and column wise. More precisely, x axis and y axis. These are the two dimensions of the screen and hence you can arrange element according to these two dimensions

Flex layout only deals with either column or row. It doesn't provide you the flexibility of positioning a element in inconsistent order.

Whereas Grid provides you the flexbility of adjusting element in both the directions either column or row.

CSS grid is the widely used layout methods nowadays. Let's talk about it in details 👇🏻

gird-template-columns

This property defines the number of column in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.

OUTPUT:

Similary we have grid-template-rows. It is used to define the number of rows and height of rows.

For example:

.container {
gird-template-columns: 200px 200px 200px 200px 200px
grid-template-rows: 200px 400px;
}

As you can see there is a lot of repeated code in
grid-template-columns: 200px 200px 200px 200px 200px;

Instead of this we can use repeat function

grid-template-columns: repeat(5, 200px);

Responsiveness is one of the major thing we need to keep in my while forming a proper layout.

There are millions of devices on which your webpage will be viewed. We might run into some responsiveness issue if we use pixel unit.

In order to prevent this issue, it is recommended to use fraction values

For example:

.container {
grid-template-columns: 1fr 2fr 1fr
}

This is the one way of handling responsiveness in width wise

Consider a scenario in which you need to write large amout of text in an element. You will get this issue 👇🏻

In order to prevent this overflow issue, we have minmax() function

grid-auto-rows: minmax(200px, auto);

It's pretty intuitive that the height of gird items will be 200px minimun and "auto" maximun(according to content)

So far we have discussed about 1 dimensional layout system. As you can see all element are very consistent and following same number of columns and row. Let's talk something about 2D

The 2 dimensions of CSS grid layout is totally handled by the two CSS properties called grid-row and grid-column

For example:

I want my first item taking up entire row, that is from first column to last column

As you can see the first element covering entire row.

I think that's pretty much it for this thread. Explore more about layouts as it is an essential topic in web development. If you like it, share it with your connections ❤️

Peace out 😉