One option for controlling responsive layouts is called Flexbox. 

Flexbox is a CSS layout module that allows you to create flexible and responsive layouts for your web pages. It provides a way to control the positioning, sizing, and alignment of elements within a container, regardless of the size of the elements or the container itself.

With flexbox, you define a container element and then add child elements, which are referred to as flex items. You can then use a range of CSS properties to control the layout and appearance of these items.

Some of the key properties of flexbox include:

• display: flex; – This property is applied to the container element and tells the browser to use flexbox for its layout.

.container {

   display: flex; /* or inline-flex */

 }

• flex-direction – This property determines the direction of the main axis, which is the primary axis along which flex items are laid out. You can set this property to row to arrange items horizontally, or column to arrange them vertically.

.container {

   flex-direction: row;

   /* | row-reverse | column | column-reverse; */

 }

• justify-content – This property controls the alignment of items along the main axis. You can use it to distribute items evenly, or to align them to the start or end of the container, or to the center.

.container {

   justify-content: flex-start ;

   /* flex-end | center | space-between | space-around | space-evenly | start | end | left | right; */

 }

• align-items – This property controls the alignment of items along the cross axis, which is perpendicular to the main axis. You can use it to align items to the top, center, or bottom of the container, or to stretch them to fill the available space.

.container {

   align-items: stretch ;

   /* flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start |  */

 }

• flex-wrap – This property controls whether items should wrap to the next line or remain on the same line when they exceed the width of the container.

.container {

   flex-wrap: nowrap;

   /*  wrap | wrap-reverse */

 }

• flex-grow and flex-shrink – These properties control how flex items should grow or shrink to fill the available space. You can use them to create flexible and responsive layouts that adapt to different screen sizes and device orientations.

Overall, flexbox provides a powerful and flexible way to create responsive and adaptive layouts for your web pages.

Try some Flexbox here:  https://codepen.io/team/css-tricks/pen/EKEYob and read more about it here: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/