In this series of the blog post, I will be writing about CSS properties that I never knew existed. I am not much of a frontend developer by myself but I found these properties to be pretty interesting. So,I thought it will be a great idea to share what I learnt which will further enhance my learning and information retaining process too.
These articles are pretty much like tutorial docs to things I learn. So, your suggestions on how to maintain and further how to develop good writing would be immensely helpful.
Properties no. 1 : place-items:center
We all know sometimes centre a <div>
element could be a problem.(especially for beginners). The margin, padding sometimes messes up and results in a lot of frustration. Initially, for me, I didn't understand much of how CSS worked and I hated writing CSS. So, this property will be pretty handy if you are already writing CSS.
Note: This will only work on CSS layout options: Grid and Flexbox
To use this property we'll have a short HTML code where we will have one parent and a child element.
<div class="container">
<div class="box">
<p>Hello World</p>
</div>
</div>
So, we have a parent-div called as container
and a child div called box
.
Inside the box
div, we have a simple <p>
tag.
Let's add a bit of styling to our page.
.container{
background-color:coral;
height:200px;
width:500px;
}
.box{
padding:10px;
background-color:skyblue
}
This is how our current layout looks:
Now, let's add a bit of line to our CSS Code.
First, we specify the parent element to display: grid
and then insert our magical line of code i.e. place-items: centre
. Here is what our final CSS code will look like :
.container{
background-color:coral;
height:200px;
width:500px;
display:grid;
place-items:center
}
.box{
padding:10px;
background-color:skyblue
}
So, what place-items: centre
does is that it places the child element of it at center, so even if you alter the screen-size, the child element will always be placed in the center of the parent element.
Here's how our design will look like after the final CSS :
So, as you see, with just a single line of code, it became much easier to center the child elements.
In case you don't want to write the code yourself, here's a CodePen link.