In WordPress, List View and Grid View refer to different ways of displaying posts or content on a page, and they are related to the CSS styles used to format the display.
List View:
A List View typically displays posts or content in a vertical list, with each post or content item displayed one after the other. This is a straightforward and simple way of displaying content and is commonly used for displaying blog posts, news articles, or other similar content.
<!DOCTYPE html>
<html>
<head>
<style>
.post-list {
list-style: none;
margin: 0;
padding: 0;
}
.post-item {
margin-bottom: 20px;
}
.post-item h2 {
font-size: 24px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- Displaying posts in a ListView -->
<ul class="post-list">
<li class="post-item">
<h2>Post Title 1</h2>
<p>Post excerpt or content here...</p>
</li>
<li class="post-item">
<h2>Post Title 2</h2>
<p>Post excerpt or content here...</p>
</li>
<li class="post-item">
<h2>Post Title 3</h2>
<p>Post excerpt or content here...</p>
</li>
</ul>
</body>
</html>
Output:
Grid view:
This layout displays posts in a grid format, with each post represented by a thumbnail image and a short description. It is a visually appealing layout that can showcase images or products. It is particularly useful for websites that have a lot of visual content, such as photography or e-commerce sites.
<!DOCTYPE html>
<html>
<head>
<style>
.post-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 250px);
grid-gap: 20px;
}
.post-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 20px;
}
.post-item h2 {
font-size: 24px;
margin-bottom: 10px;
}
.post-item p {
font-size: 16px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- Displaying posts in a ListView -->
<ul class="post-grid">
<li class="post-item">
<h2>Post Title 1</h2>
<p>Post excerpt or content here...</p>
</li>
<li class="post-item">
<h2>Post Title 2</h2>
<p>Post excerpt or content here...</p>
</li>
<li class="post-item">
<h2>Post Title 3</h2>
<p>Post excerpt or content here...</p>
</li>
</ul>
</body>
</html>
Output:
