Integrate a simple CSS grid layout into WordPress/WordPress

Getting a consistent, solid grid layout into WordPress can be a painless process if you use the right tools. In this tutorial, you will learn step by step how to quickly set up a grid system in WordPress that is lightweight and easy to modify. We’ll keep the design simple so we can focus on using the right tools to set up your grid, but remember you can style the grid yourself if needed.

I will be using a default Pool theme in WordPress for this tutorial just to show you the “start from scratch” approach to getting the grids just right.

Step 1: Determine your grid width

Before you start, you need to determine how wide your grid will be. For my WordPress site, I can see that the width of my main column is 450px using Google Chrome’s “Inspect Element” feature when you right click on an object. This is the fastest way I found that can quickly determine the width and height of an object on a web page.

Step 2: Design the grid

Instead of manually building a mesh, which you can do if you want, I recommend using one of the many mesh creation tools available. For this tutorial, I will be using a grid generator using MindPlay. It’s a very simple and lightweight grid generator.

I want to display three columns and I need to make sure my pixels are at 450. So adjust accordingly and skip the “Export” tab. We will not pass * font The features are in this guide, though this is definitely worth exploring for yourself.

In the Export tab, use the top “Style Sheet” pane and scroll down until you see the “Grid” comment. You will copy everything from the comment to the bottom of this frame. It should only be about 30 lines

.
 
 
 
Bước 3: Cập nhật Biểu định kiểu WordPress của bạn
 
Đăng nhập vào trang web WordPress của bạn và đi đến Giao diện> Trình chỉnh sửa.
 
 
 
Ở phía dưới bên phải của bảng Editor, bạn sẽ thấy một Styles.css tập tin (hoặc một cái gì đó tương tự, tùy thuộc vào chủ đề của bạn). Nhấn vào đây để mở nó lên.
 
 
 
Cuộn xuống cuối trang tính và dán phần trước của bạn từ MindPlay.dk:
 
 
 
Bước 4: Triển khai lưới
 
Để sử dụng lưới, bạn chỉ cần tạo một 
 với lớp "lưới". Mỗi khu vực của lưới được xác định trong CSS. Mở một trang mới hoặc bài viết. Chuyển đến tab HTML để bắt đầu xây dựng lưới của bạn. 
 
 
Đây là một số mẫu trước mà bạn có thể dán vào vị trí để bắt đầu:
 
 
  
Cột bên trái
  
Cột giữa
  
Cột bên phải
  
 
This is what it looks like in WordPress:
 
Save/Update the page and see the results.  In my case, this is the homepage of the site:
 
As you can see from the screenshot above, we have our three columns and everything is right where we expect it to be.  You can add as many rows as you want by starting with the following 
:
 
 
   
Cột bên trái
  
Cột giữa
  
Cột bên phải
    
Hàng trái # 2
  
Hàng giữa số 2
  
Hàng bên phải số 2
  
Here's how it looks so far:
 
Now you can add images or text and style each row exactly how you want.
Tweaking Tips
You may have problems in some browsers when you have more than one row.  To work around this, you'll need to set the margin to the right (.lưới-m4, in our case) to the height you want each row to be.  If you are using a 250px x 250px image, make the inner row height .lưới-m4 is 250px:
.lưới-m4 float: trái; chiều rộng: 20px; chiều cao: 250px; 
This will ensure .lưới-m1 on the left side of the next row do not float the row above it.
If you want to style the entire grid's background, you'll need to adjust the height of the .lưới điện class.  So let's say you have four rows on your grid, each of which is 250px in size.  You'll want to add a height to the .grid layer at 1000px so that any styling elements you add will cover the entire grid design.
.lưới chiều rộng: 450px; chiều cao: 1000px; lề: tự động; 
Depending on the version of MindPlay.dk grid generator you use, the site may not generate ".grid-m4" and you will need to use .lưới-m1 after .lưới-c3 to make sure your grid expands to the right place:
  
Cột bên trái
  
Cột giữa
  
Cột bên phải
  
Final result 
Here's what my final result looks like with two rows and some simple graphics:
 
Have fun designing and remember that you can style your grid any way you want.
Editor's Note: This post was written by Tara Hornor for Hongkiat.com.  Tara has a degree in English and writes about marketing, advertising, branding, graphic design, and desktop publishing.  In addition to her writing career, Tara also enjoys spending time with her husband and two children.