Layouts in CSS Explained

CSS (Cascading Style Sheets) is a powerful styling language that is used to create visually appealing and responsive layouts for web pages. The layouts in CSS are created using a combination of HTML and CSS. In this article, we will discuss the different types of layouts available in CSS and provide examples for each.

1. Fixed Layout: A fixed layout is a layout where the size of the elements on the page is fixed and does not change based on the size of the viewport. This layout is ideal for pages with a fixed amount of content, such as a landing page.

Example:

<style>
? div {
? width: 800px;
? margin: 0 auto;
? border: 1px solid #000;
? height: 100vh;
}
</style>
<div>This container is fixed to 800px and it will nt change its behaviour no matter what</div>        

https://codepen.io/yogi-dad/pen/LYBBBeJ?editors=1100

Fluid Layout: A fluid layout is a layout where the size of the elements on the page changes based on the size of the viewport. This layout is ideal for pages with dynamic content, such as a blog or news website.

Example:

<style>
div {
? ? width: 100%;
? ? max-width: 1200px;
? ? margin: 0 auto;
? border:1px solid #000;
}
</style>
<div>
? A fluid layout is a layout where the size of the elements on the page changes based on the size of the viewport
</div>        

https://codepen.io/yogi-dad/pen/RwBBBQO

Responsive Layout: A responsive layout is a layout that adapts to the size of the viewport. This layout is ideal for pages that need to be viewed on different devices, such as smartphones, tablets, and desktop computers.

Example:

<style>
div{
? border:1px solid #000;
? height:100vh;
}
@media (min-width: 769px) {
? ? div {
? ? ? ? width: 80%;
? ? }
}
@media (max-width: 768px) {
? ? div {
? ? ? ? width: 100%;
? ? }
}
</style>
<div>
? A responsive layout is a layout that adapts to the size of the viewport. if you resize the page to 768px or less then container will use 100% space.
</div>        

https://codepen.io/yogi-dad/pen/ZEjjjxy

Grid/Flex Layout: A grid layout is a layout that uses a grid system to organize elements on the page. This layout is ideal for pages with a lot of content and elements, such as a portfolio or e-commerce website. A flexbox layout is a layout that uses a flex container to organize elements on the page. This layout is ideal for pages with a lot of content and elements, such as a portfolio or e-commerce website.

Example:

<style>
? div.grid-view{
? display:grid;
? grid-template-columns:repeat(4, 1fr);
? place-items:center;
}
div div{
? width:100px;
? height:100px;
? border:1px solid #000;
}
div.flexbox{
? display:flex;
? gap:1rem;
? place-items:center;
}
</style>
<p>Grid View is a two-dimensional layout system that allows you to create rows and columns to organize content on a web page. It provides a lot of control over the placement of elements and is well suited for creating complex, grid-based layouts.</p>
<div class="grid-view">
? <div>Grid Item</div>
? <div>Grid Item</div>
? <div>Grid Item</div>
? <div>Grid Item</div>
</div>
<p>Flexbox, on the other hand, is a one-dimensional layout system that focuses on arranging elements along a single row or column. It's more suited for simple, flexible layouts where elements are arranged in a single direction. It is generally considered more simple to use than grid view.</p>
<div class="flexbox">
? <div>1</div>
? <div>2</div>
? <div>3</div>
? <div>4</div>
</div>        

https://codepen.io/yogi-dad/pen/NWBBBzN

In conclusion, different types of layouts in CSS provide different ways to style a web page depending on the type of content and design that you want to achieve. By understanding the different types of layouts and the situations where they are best used, you can create visually appealing and responsive web pages that adapt to different devices and screen sizes.

#CSSLayouts #WebDesign #ResponsiveDesign #CSS