Show List
Tutorials > CSS > CSS Layout

CSS Layout

CSS (Cascading Style Sheets) is a styling language used to describe the look and formatting of a document written in HTML. In CSS, you can control the layout of your web pages in several ways, such as defining the position, size, and arrangement of elements on a page.

Here are some common CSS layout techniques with examples:

  1. The Box Model: Every HTML element is considered as a rectangular box, and the box model defines how the content, padding, borders, and margins of an element are calculated and displayed. For example:
div {
   width: 500px;
   height: 200px;
   padding: 10px;
   border: 5px solid black;
   margin: 20px;
}
  1. Floating Elements: By using the float property, you can make an element float to the left or right, allowing other elements to wrap around it. For example:
img {
   float: left;
   margin-right: 10px;
}
  1. Flexbox Layout: Flexbox is a modern layout technique that allows you to arrange elements in a flexible and responsive manner. It provides a more efficient way to lay out, align, and distribute space among items within a container. For example:
.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.item {
   width: 30%;
   height: 200px;
   margin-bottom: 20px;
}
  1. Grid Layout: Grid is another layout technique that provides a two-dimensional layout system, allowing you to arrange elements into rows and columns. It provides a more structured way to lay out elements compared to Flexbox. For example:
.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 20px;
}

.item {
   width: 100%;
   height: 200px;
}
These are just a few examples of the layout techniques available in CSS. You can combine and use them in different ways to achieve the desired layout for your web pages.


Next: CSS Flexbox

    Leave a Comment

  • captcha text