CSS Layout
CSS layout is used to control the position, size, alignment, and spacing of elements on a webpage. It helps organize content into different sections such as headers, navigation bars, sidebars, content areas, and footers.
CSS provides several layout techniques, including normal flow, display, positioning, Flexbox, Grid, and multi-column layouts. Each technique is useful for different types of webpage structures.
Types of CSS Layout
The main CSS layout techniques are:
- Normal Flow: The default way elements are arranged on a webpage.
- Display Layout: Uses properties such as block, inline, inline-block, and none to control how elements are displayed.
- Positioning: Places elements using properties such as static, relative, absolute, fixed, and sticky.
- Flexbox: Provides a one-dimensional layout system for arranging elements in rows or columns.
- CSS Grid: Provides a two-dimensional layout system for arranging elements in rows and columns.
- Multi-column Layout: Divides content into multiple columns.
Normal Flow
Normal flow is the default layout behavior of HTML elements. Block-level elements normally appear one after another, while inline elements appear within the same line when enough space is available.
Example
The following example shows how block-level elements are arranged in the normal document flow.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
margin: 5px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>First Element</div>
<div>Second Element</div>
<div>Third Element</div>
</body>
</html>
Display Property
The display property controls how an element is displayed and how it participates in the layout. Common values include block, inline, inline-block, flex, grid, and none.
Example
The following example shows how the display property can place elements on the same line.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 100px;
padding: 20px;
margin: 5px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
CSS Positioning
CSS positioning allows you to control the location of an element. The position property supports values such as static, relative, absolute, fixed, and sticky.
Example
The following example shows how to position an element relative to its normal position.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
left: 50px;
width: 150px;
padding: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">Positioned Element</div>
</body>
</html>
Absolute Positioning
The position: absolute value removes an element from the normal document flow and positions it relative to its nearest positioned ancestor.
Example
The following example shows how to position an element inside a container using absolute positioning.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: lightgray;
}
.box {
position: absolute;
right: 20px;
bottom: 20px;
padding: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box</div>
</div>
</body>
</html>
Fixed Positioning
Fixed positioning keeps an element in the same position relative to the browser viewport. The element remains visible at that position while the page is scrolled.
Example
The following example shows how to create a fixed element at the bottom of the browser window.
<!DOCTYPE html>
<html>
<head>
<style>
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 15px;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<p>Scroll the page to see the fixed element.</p>
<div class="footer">Fixed Footer</div>
</body>
</html>
Sticky Positioning
Sticky positioning combines features of relative and fixed positioning. An element behaves normally until it reaches a specified position, after which it remains visible while scrolling.
Example
The following example shows how to create a sticky header.
<!DOCTYPE html>
<html>
<head>
<style>
.header {
position: sticky;
top: 0;
padding: 15px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="header">Sticky Header</div>
<p>Scroll down the page to see the sticky header.</p>
<p>Content of the webpage...</p>
<p>More content...</p>
<p>More content...</p>
<p>More content...</p>
</body>
</html>
CSS Flexbox Layout
Flexbox is a one-dimensional layout system used to arrange elements in a row or column. It provides properties for controlling direction, alignment, spacing, and the size of flex items.
Example
The following example shows how to arrange elements horizontally using Flexbox.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 10px;
}
.box {
padding: 20px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Flexbox Direction
The flex-direction property defines the direction in which flex items are placed. The commonly used values are row, row-reverse, column, and column-reverse.
Example
The following example shows how to arrange Flexbox items vertically.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
gap: 10px;
}
.box {
padding: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Flexbox Alignment
Flexbox provides justify-content and align-items properties to control the alignment of flex items along the main and cross axes.
Example
The following example shows how to center an element horizontally and vertically using Flexbox.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightgray;
}
.box {
padding: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Centered Box</div>
</div>
</body>
</html>
CSS Grid Layout
CSS Grid is a two-dimensional layout system that arranges elements into rows and columns. It is useful for creating page structures and layouts that require control over both dimensions.
Example
The following example shows how to create a simple three-column grid.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
padding: 20px;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
Multi-Column Layout
CSS multi-column layout divides text content into multiple columns. The column-count property specifies the number of columns used to display the content.
Example
The following example shows how to divide text into three columns.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.box {
padding: 20px;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
Responsive CSS Layout
Responsive layout allows a webpage to adjust its structure and size according to the available screen space. Flexbox, Grid, relative units, and media queries can be combined to create layouts that work across different screen sizes.
Example
The following example shows how a grid can change from two columns to one column on smaller screens.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.box {
padding: 30px;
background-color: lightgreen;
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
</body>
</html>
Z-Index and Layering
The z-index property controls the stacking order of positioned elements. An element with a higher z-index value is displayed above an element with a lower value.
Example
The following example shows how to control the stacking order of two overlapping elements.
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
position: absolute;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background-color: lightblue;
z-index: 1;
}
.box2 {
position: absolute;
top: 80px;
left: 80px;
width: 100px;
height: 100px;
background-color: lightgreen;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</body>
</html>
Subscribe to Tpoint Tech
We request you to subscribe our newsletter for upcoming updates.
We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.
Contact info
G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India
Follow us
