Align 3 unequal blocks left, center and right

Question

I\'m trying to align a top menu which consists of 3 blocks of content.

What I\'m trying to achieve is this:

• block 1: left aligned
• block 2: cen

Answer 1

I asked what seems to be a very similar question and stack overflow directed me here. The response from @Paolamoralesval inspired me to realise the required effect can be achieved in CSS grid. Now that grid support is pretty much universal I hope that this meets everyone's needs. This solution is I believe fully responsive to window size as well as height and width of the header items as you should see if you resize the window where you view the snippet.

.header {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-rows: min-content;
  grid-template-columns: 1fr 1fr 1fr;
}
.header-left {
  justify-self: start;
  align-self: center;
  text-align: left;
  background-color: red;
}
.header-center {
  justify-self: center;
  align-self: center;
  text-align: center;
  background-color: green;
}
.header-right {
  justify-self: end;
  align-self: center;
  text-align: right;
  background-color: blue;
}
.shrink-kitty {
    width: 200px;
}

  
    

      

          

            

            By David Corby

            Edited by: Arad
Image:Kittyplya03042006.JPG
CC BY 2.5, Link
          
          
In the middle
          

            Much much much much more on the right hand side

            Indeed two lines
          
      
      
Body of the page
      
At the bottom