loading...

How to write complex layouts in one line of Css

narendersaini32 profile image Narender Saini ・2 min read

How to write complex layouts in one line of Css

In the modern era of frontend writing responsive styling became one of the essential skill for all developer. Some times to perform simple things developers write a lot of lines of code which become really difficult to read in future. In this article we will gonna learn how we can write complex layouts in one line of Css.

Centering a child

Centering a child

Centering content is one of the common things that we usually do in day to day life.

Let’s assume we have two divs like this and we want to make child centered always.

<div class="parent" >
  <div class="child" contenteditable>:)</div>
</div>

We can achieve this using the grid.

.parent {
    display: grid;
    place-items: center;
  }

Deconstructed Pancake

Deconstructed Pancake

Now we have a parent with 3 child and we want them to be responsive. They can take a static size or they can take full size according to available space.

For this we will gonna use flex: <grow> <shrink> <baseWidth>

  <div class="parent white">
    <div class="box green">1</div>
    <div class="box green">2</div>
    <div class="box green">3</div>
  </div>

For no stretching we can make grow 0;

flex: 0 1 150px;

one line of Css

For stretching we can make grow 1;

flex: 1 1 150px;

one line of Css

I hope you have learn how to write complex layouts in one line of Css.

Checkout more complex layout here.

How to add video support to React App

Posted on by:

narendersaini32 profile

Narender Saini

@narendersaini32

I am Senior Reactjs developer with 4 year of experience. Apart from freelancing work I am a mentor teaching 100's of students around the globe. I love to share knowledge regarding Reactjs.

Discussion

markdown guide