Blog Grid with Pagination

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

6 sectionsView all →
1–5 of 6
Blog

Blog Grid with Pagination

Responsive · Animated
Blog

Blog Post Cards

Responsive · Animated
Blog

Featured Post With List

Responsive · Animated
Blog

Blog Post Page (Single Article)

Responsive · Animated
Blog

Editorial Post List

Responsive · Animated

Blog Grid with Pagination — Free Website Section Template

Blog · v1.0.0 · Updated 2026-10-25 · Responsive · GSAP animation · HTML, React & Vue

CategoryBlog
Tagsblogarticlesgridpaginationblog indexarchiveload morepostslight
Updated October 20, 2026

What's included

Features

Grid of post cards with cover, category, date, read time, title, excerpt and author
Numbered pagination with Previous, Next and ellipses for long lists
Or a "Show more posts" button that reveals the next batch
Choose 1 to 24 posts per page and two, three or four columns
Status line such as "Showing 1–6 of 12 posts", with labels you can change
All posts stay in the HTML for search engines and visitors without JavaScript
Keyboard friendly, with focus kept on the page buttons
BlogPosting list structured data
Add, reorder and remove up to 48 posts, with image uploads
Export HTML, a ZIP with images, React or Vue

About this section

Blog Grid with Pagination — Free Blog Index Template

Blog Grid with Pagination: A blog index page: a heading and intro, then a grid of post cards with cover, category, date, read time, title, excerpt and author. Every post is in the page for search engines; for visitors the grid shows one page at a time with Previous, numbered and Next buttons (or a “Show more posts” button) and a line saying which posts are showing. You choose how many posts per page and how many columns.

Blog Grid with Pagination is a free template for a blog index or archive page. A heading and intro sit above a grid of post cards, each with a cover image, category, date, read time, title, excerpt and author. When there are more posts than fit on one page, visitors move through them with numbered pagination or a "Show more posts" button. It works for blog indexes, news pages, guide libraries and portfolios, and it keeps a long archive tidy on phones, tablets and desktops without sending visitors to a new page for every click.

Every post stays in the page

All posts are written into the page itself. Search engines and visitors without JavaScript see the full list, and with JavaScript the grid shows one page at a time. A status line, such as "Showing 1–6 of 12 posts", is announced to screen readers when the page changes, and focus stays on the page buttons.

You choose how it pages

Set how many posts appear per page, from 1 to 24, and how many columns the grid has, from two to four, with fewer on tablets and phones. Pick numbered pages with Previous and Next, which collapse long lists with ellipses, or a single load-more button that reveals the next batch and then disappears.

Structured data and speed

The template writes BlogPosting list structured data from your posts, and cover images are lazy-loaded so the first page opens fast. Card titles and covers are real links, so every post can be reached with a keyboard.

Edit and export

Add, reorder and remove posts in the list, upload covers and author photos, change every label, then export HTML, a ZIP, React or Vue. Pair it with the Blog Post Page for the article view.

Why use it

Why Use the Blog Grid with Pagination

🔍
Crawlable by design
Every post is in the page, so search engines can find them all and visitors without scripts still see the full list.
🧭
Easy to browse
Numbered pages, a status line and a load-more option let readers move through a long archive at their own pace.
⚙️
Flexible layout
Set the page size and the number of columns to match your content and your design.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, pagination and posts in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

📚
Blog index and archive pages
List every article on one page and let readers page through them, with categories and dates visible on each card.
🗞
News and update listings
Show the latest announcements first, then older ones on later pages, with a short excerpt for each item.
🧰
Guides and resource libraries
Organise tutorials, templates and downloads in a grid, with a load-more button for visitors who like to keep scrolling.
💼
Portfolio and case study lists
Present past projects as cards with a cover and a short summary, with pagination once the list grows past a screen or two.

Got questions?

Frequently Asked Questions

Not here. All posts are in the page itself, so search engines can read every post and link without needing to follow page buttons. The buttons are for visitors.

Numbered pages suit archives people return to, because they can tell where they are. A load-more button suits shorter lists and mobile visitors who like to keep scrolling.

Up to 48 posts in the list, shown from 1 to 24 per page. For a larger archive, link to separate archive pages from the heading.

Yes. Without JavaScript every post is shown and the page buttons are hidden, so nothing is lost, and visitors can still scroll through the whole list.

Yes. The Previous, Next and show-more labels, the status line and the navigation label for screen readers are all fields you can edit.

It saves an editable copy of your Blog Grid with Pagination in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.