DEV Community: virensuthar

Basics of CSS Grid

virensuthar — Sun, 14 Mar 2021 08:46:49 +0000

CSS Grid

=> CSS Grid is a layout based system used for placing elements in a grid format without using float and position properties. It's easy to use also used for making webpage responsive. Flexbox and Grid are the most important things to learn in modern CSS.

You can check my article on CSS Flexbox here.

=> Grid is structured on rows and column, by using the grid you can place elements on rows and column in particular number and size and even place in a particular order. here is a basic guide so you can start implementing it in your CSS.

Using Grid

Give property of display: grid; to element for using flexbox.

#### grid-template-columns

=> grid-template-columns is used for placing grid elements across the column,
like if you give 3 sizes it will divide your page into 3 columns.

example : grid-template-columns : 100px 100px 100px ; this will make 3 columns
with the each column size of 100px, here you can play with numbers you can even pass 100px 200px 100px. You have to pass parameter as number of columns you want you have to pass 5 parameters for 5 columns.

=> But if you want 10 columns this is not a good idea so the grid has a function repeat() so this become easy to use, in repeat you pass the number of columns and the size of each element. Ex: grid-template-column : repeat(5, 100px) it create 5 column size of 100px or grid-template-column : repeat(5, 1fr) fr is fractional units it means it takes all amount of free space.

#### grid-template-rows

=> grid-template-rows is used for placing grid elements across the rows. All the properties are the same as grid-template-columns but it all works in rows.

=> Now giving space between grid elements you use grid-gap also you can use ( gap only)

Ex: grid-gap : 24px ; it place items with 24px of distance.

Look at the image below all the above properties are summed up. 👇

grid-auto-columns : auto for implicitly created columns positioning (implicit: not created by you).

grid-auto-rows : auto for implicitly created rows positioning.

Placing grid items

grid-column-start : 2 will place items in position 2 as possible.

grid-column-end : 2 it takes to position 5 and expanding.

both can be written shortly like this grid-column : 2/3

he same applies to rows also.

span in a grid used for expanding element at its position with other elements size
, like grid-column: span 2/ 4 means the first element will take the amount of space as equal to 2 elements.

#### minmax()

Ex : minmax(150px, 1fr) this means element's minmun width will be 150px and maximum will be 1fr, this used in grid-template-columns.

Tip: whenever you want to make the grid responsive do it this way it makes it responsive without using media query grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); ( replace 300px size according to you.)

#### grid alignment

unlike flexbox, you can centre things on a grid also.

align-items: center and justify-items: center both can be written in shortly place-items: center.

Best resource to learn CSS Grid is cssgrid.io course by wesbos

Thanks for reading 😊, please give your feedback I am trying to improve my blog by writing in a more structured way. 🙏

Get started with Flexbox.

virensuthar — Fri, 04 Dec 2020 04:37:49 +0000

What is Flexbox?

Flexbox is a layout in CSS3. Flexbox is used to make responsive layouts and components on a webpage. Using is a good choice to use in CSS so you can design the page responsively. Here is a basic guide to getting starting with flexbox.

Consider the above image and try to understand a layout there is one container, and inside that two elements are placed. This is an important part to understand, then using flexbox will be easy. Now plot that container into an x-y axis coordinate, horizontal part in flexbox called the Main axis and vertical part is called the Cross axis.

Using Flexbox

Give property of display: flex; to element for using flexbox.

Flex-direction

Flex-direction property is used to give direction to element should be placed, four types of properties are defined.

flex-direction: row; place flex-items in row (horizontal).
flex-direction: row-reverse; place flex-items in row but in reverse order.
flex-direction: column; place flex-items in column (vertical).
flex-direction: column-reverse; place flex-items in column but in reverse order.

You can see in the example below.

Flex-wrap

Flex-wrap property is used for wrapping flex-items inside the flex-container.

flex-wrap : nowrap will not wrap flex-item in flex-container.
flex-wrap : wrap will wrap flex-item in flex-container if it not fit in container size.

You can see in the example below.

Justifying and aligning flex-item

Now, this is a very important property of flexbox and you will use it regularly.
Whenever we want to align flex-item to the Main axis (horizontally) use justify-content, and if you want to align flex-items to the Cross axis (vertically) use
align-items. Now let's see in detail.

Justifying content along with the Main axis (Horizontally).

justify-content: flex-start will place flex-item to the start of flex-container (refer the first image above)
justify-content: flex-end will place flex-item to the end of flex-container
justify-content: center to center flex-items.
justify-content: space-around` space up around item.
justify-content: space-between uses the whole frame and space item between.
justify-content: space-evenly space all item evenly

Aligning content along with the Cross axis (vertically).

All properties are the same as justify-content .

align-items: flex-start will place flex-item to the start of flex-container (refer the first image above)
align-items: flex-end will place flex-item to the end of flex-containers
align-items: center to center flex-items.
align-items: baseline place flex-item to base item.

Tip: Flexbox is a good option for centering things in CSS. Make sure whatever element you want to center their parent element would have width and height defined and give parent element justify-content: center and align-items: center .

Thanks for reading.