With the development of Internet technology, website layout is becoming more and more important. For website designers, how to use CSS3 to achieve a beautiful, concise and flexible multi-column layout is a required skill. In this article, we will introduce step by step how to use CSS3 multi-column layout, and take you through a complete layout, so that your website can achieve better results and attract more users to visit.
1. What is CSS3 multi-column layout?
CSS3 multi-column layout is a method to display text and other content in multiple columns. Compared with traditional single-column layout, multi-column layout can not only make information clearer, but also can place more content in a limited space. The main compatibility of CSS3 multi-column layout is IE10+ and other browsers.
2. Example of multi-column layout
Let us learn the implementation of multi-column layout through an example. First, we need to create an HTML file with some text content:
<!DOCTYPE html>
<html>
<head>
<title>CSS3多列布局</title>
<style>
body{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
}
.container{
margin: 50px auto;
padding: 30px 60px;
background-color: #f1f1f1;
box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);
}
h1{
font-size: 28px;
text-align: center;
color: #333;
margin-bottom: 50px;
}
p{
color: #777;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS3多列布局实例</h1>
<p>多列布局是一种常用的网页布局，它可以在有限的空间内更好的展示信息。在本实例中，我们将会使用 CSS3 实现一个简单的多列布局。</p>
<p>首先，我们需要先确定我们要创建的多列布局的列数以及间距。</p>
</div>
</body>
</html>
The above code implements a simple HTML page, including a .container class, which contains an h1 tag and two p tags.
Next, we need to implement a multi-column layout using CSS3. We need to add the following CSS code in the .container class:
.columns{
column-count: 3;
column-gap: 60px;
}
The above code implements a three-column layout with 60px spacing between each column. However, according to the W3C specification, in order to be compatible with browsers that do not support the column attribute, we need to add some compatible styles:
.columns{
-moz-column-count: 3;
-moz-column-gap: 60px;
-webkit-column-count: 3;
-webkit-column-gap: 60px;
column-count: 3;
column-gap: 60px;
}
Next, we need to add the content to be displayed in multiple columns to the .columns class:
<div class="container">
<h1>CSS3多列布局实例</h1>
<p>多列布局是一种常用的网页布局，它可以在有限的空间内更好的展示信息。在本实例中，我们将会使用 CSS3 实现一个简单的多列布局。</p>
<p>首先，我们需要先确定我们要创建的多列布局的列数以及间距。</p>
<div class="columns">
<p>第一列</p>
<p>第二列</p>
<p>第三列</p>
<p>第四列</p>
<p>第五列</p>
<p>第六列</p>
<p>第七列</p>
<p>第八列</p>
<p>第九列</p>
<p>第十列</p>
</div>
</div>
Finally, we need to set the overflow property of the .columns class to hidden to prevent the content from exceeding the width of multiple columns:
.columns{
-moz-column-count: 3;
-moz-column-gap: 60px;
-webkit-column-count: 3;
-webkit-column-gap: 60px;
column-count: 3;
column-gap: 60px;
overflow: hidden;
}
We have now successfully created a simple multi-column layout. You can change the number of columns and spacing according to your needs.
3. Interesting multi-column layout
As an excellent website designer, you must not only implement simple multi-column layouts. Next, let's look at some cool and interesting multi-column layouts.
- Full screen background multi-column layout:
<!DOCTYPE html>
<html>
<head>
<title>CSS3多列布局</title>
<style>
body{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
background-image: url("bg.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
}
.container{
max-width: 1200px;
margin: 50px auto;
padding: 30px 60px;
background-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);
}
h1{
font-size: 56px;
text-transform: uppercase;
text-align: center;
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
margin-bottom: 50px;
}
p{
color: #fff;
margin-bottom: 30px;
font-size: 24px;
}
.columns{
display: flex;
flex-wrap: wrap;
margin: 0 -30px;
}
.column{
flex-basis: 33.33%;
padding: 30px;
box-sizing: border-box;
}
.column h2{
color: #fff;
font-size: 36px;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.column p{
font-size: 20px;
}
.column img{
width: 100%;
height: auto;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS3多列布局实例</h1>
<p>这是一段在一个全屏背景上的多列布局，使用了 Flexbox 来实现。每个列都包含一个 h2 标题、一段描述和一个图片。</p>
<div class="columns">
<div class="column">
<img src="img1.jpg" alt="image">
<h2>第一列</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dapibus nulla. Sed eget nibh purus. Nullam vitae urna at justo eleifend ullamcorper. Integer a malesuada neque. Donec in euismod nulla. Mauris eget ante euismod, varius nisi non, vehicula massa.</p>
</div>
<div class="column">
<img src="img2.jpg" alt="image">
<h2>第二列</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dapibus nulla. Sed eget nibh purus. Nullam vitae urna at justo eleifend ullamcorper. Integer a malesuada neque. Donec in euismod nulla. Mauris eget ante euismod, varius nisi non, vehicula massa.</p>
</div>
<div class="column">
<img src="img3.jpg" alt="image">
<h2>第三列</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dapibus nulla. Sed eget nibh purus. Nullam vitae urna at justo eleifend ullamcorper. Integer a malesuada neque. Donec in euismod nulla. Mauris eget ante euismod, varius nisi non, vehicula massa.</p>
</div>
<div class="column">
<img src="img4.jpg" alt="image">
<h2>第四列</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dapibus nulla. Sed eget nibh purus. Nullam vitae urna at justo eleifend ullamcorper. Integer a malesuada neque. Donec in euismod nulla. Mauris eget ante euismod, varius nisi non, vehicula massa.</p>
</div>
<div class="column">
<img src="img5.jpg" alt="image">
<h2>第五列</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dapibus nulla. Sed eget nibh purus. Nullam vitae urna at justo eleifend ullamcorper. Integer a malesuada neque. Donec in euismod nulla. Mauris eget ante euismod, varius nisi non, vehicula massa.</p>
</div>
<div class="column">
<img src="img6.jpg" alt="image">
<h2>第六列</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dapibus nulla. Sed eget nibh purus. Nullam vitae urna at justo eleifend ullamcorper. Integer a malesuada neque. Donec in euismod nulla. Mauris eget ante euismod, varius nisi non, vehicula massa.</p>
</div>
</div>
</div>
</body>
</html>
The above code implements a multi-column layout in a full-screen background, and each column contains a title, a description, and a picture. We used Flexbox for the layout of each column, and some CSS3 properties for full-screen backgrounds and gradients. You can change the background and layout according to your needs to make your website better.
- Waterfall multi-column layout:
<!DOCTYPE html>
<html>
<head>
<title>CSS3多列布局</title>
<style>
body{
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
background-color: #f1f1f1;
color: #333;
}
.container{
max-width: 1200px;
margin: 50px auto;
padding: 30px 60px;
background-color: #fff;
box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);
}
h1{
font-size: 56px;
text-transform: uppercase;
text-align: center;
color: #333;
margin-bottom: 50px;
}
.columns{
column-count: 4;
column-gap: 30px;
overflow: hidden;
margin-bottom: 50px;
}
.column{
display: inline-block;
margin-bottom: 30px;
width: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.column img{
width: 100%;
height: auto;
display: block;
max-width: none;
}
.column .overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
}
.column:hover .overlay{
opacity: 1;
background-color: rgba(255, 255, 255, 0.9);
}
.column h2{
font-size: 28px;
text-align: center;
color: #333;
margin: 0;
transition: all 0.3s ease;
transform: translateY(-50%);
}
.column:hover h2{
transform: translateY(0%);
}
</style>
</head>
<body>
<div class="container">
<h1>CSS3多列布局实例</h1>
<div class="columns">
<div class="column">
<img src="img1.jpg" alt="image">
<div class="overlay">
<h2>Title 1</h2>
</div>
</div>
<div class="column">
<img src="img2.jpg" alt="image">
<div class="overlay">
<h2>Title 2</h2>
</div>
</div>
<div class="column">
<img src="img3.jpg" alt="image">
<div class="overlay">
<h2>Title 3</h2>
</div>
</div>
<div class="column">
<img src="img4.jpg" alt="image">
<div class="overlay">
<h2>Title 4</h2>
</div>
</div>
<div class="column">
<img src="img5.jpg" alt="image">
<div class="overlay">
<h2>Title 5</h2>
</div>
</div>
<div class="column">
<img src="img6.jpg" alt="image">
<div class="overlay">
<h2>Title 6</h2>
</div>
</div>
<div class="column">
<img src="img7.jpg" alt="image">
<div class="overlay">
<h2>Title 7</h2>
</div>
</div>
<div class="column">
<img src="img8.jpg" alt="image">
<div class="overlay">
<h2>Title 8</h2>
</div>
</div>
</div>
</div>
</body>
</html>
The above code implements a multi-column layout of a waterfall flow. Each column contains some pictures and titles. When the mouse moves over the pictures, the titles will be displayed to enhance the user experience. We use the column-count property to achieve multi-column layout, and some CSS3 properties to achieve the effect of mouse movement. You can change the picture and title according to your needs to make your website more eye-catching.