Insider's Javascript

Learning CSS I never heard of : Day 1

blueturmeric's photo
blueturmeric
·

2 min read

Learning CSS I never heard of : Day 1

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:

current.PNG

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 :

finallayout.PNG

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.

CSS3stylingHTML