CSS - LAYOUT HIERARCHIES

Creating layout with CSS can seem complicated at times and be a frustrating experience. But understanding everything about CSS layout boils down to one thing being 'relationships'.
How these layouts relate to each other seems to be the ultimate hack between understanding it and utilising it.

This article will deal with the most important part of dealing with CSS layout, which is relationship.
In CSS, layouts do not stay on their own. In one way or the other it must be related to one thing on the page thereby creating a working relationship.
The first relationship we will look at is somehow like a container-content relationship which can be easily illustrated with parent-child relationship.

For example, let us look at a parent-child relationship and see how the width and height affect each other.

html



<div class= "parent">

/* Children */
<h5>CSS - Layout Hierarchies.</h5>
<p>Content</p>

</div>

CSS styling

.parent-child{
width: 750px;
border: 1px solid black;
}

With the 750px, the width of the parents will sort of dictate the width of the children, or it can be said that the children are adapting to the parent.
This is different when it comes to the height of the parent. Often times people include a height parameter to the parent.

CSS styling

.parent-child{
width: 750px;
border: 1px solid black;
height: 450px;
}

But, it is expected that the children dictate the height of the parents because the bigger the width the smaller the height and vice versa. This is important because the contents need to be contained regardless of the width of the parent. In other words, the width of the child need to be set as auto.

CSS styling

.parent-child{
width: 750px;
border: 1px solid black;
}

. parent-child > *{
width: auto;
}

We will get into the relationship with the siblings as well but let's look at more relationship with the parents.
One of these is 'inheritance'. You can set a color on the parent and all the children/individual elements will inherit it specifically.

Another thing that gives people tough time is the relationship of margin. Understanding collapsing-margin is part of understanding relationships. The two options that solves the margin problem is the 'display:grid' or 'display:flow-root'. Another way is to set 'padding:block'.

When you look at the relationship between contents, which can be referred to as siblings, the relationship get more complicated when the contents are not the same. For example; when a div or an element has two contents. And one of the contents has an image header and explanation meanwhile the other contents has only a header. Styling this contents or siblings might be frustrating or by itself difficult styling both of them. One way to handle both siblings is to make sure both of them are of the same size. Then align them as flex if you don't want them to stay in column.

display:flex;

Or you can use the flex 1 option.

flex:1;

Conclusion
Understanding these relationships have a long way to help you deep dive into layouts styling in CSS. Whenever you run into a problem, try and figure out what is influencing things to result in the way they're behaving. There are lots of things going on between relationships of the contents of a page.

If this content was helpful to you, please like, share and also leave a comment for me.

You can contact me on LinkedIn, Twitter, or checkout my GitHub profile.