Flexbox Grid trong Genesis

Flexbox Grid là một hệ thống lưới dựa trên thuộc tính flex hiển thị.

Đây là cách nó có thể được tải và sử dụng trong Genesis:

Bước 1

Tải flexboxgrid.min.css lên css thư mục của chủ đề con (tạo nếu không có).

Bước 2

Thêm phần sau vào functions.php của chủ đề con :

// Load Flexbox Grid
add_action( 'wp_enqueue_scripts', 'sk_enqueue_flexbox_grid' );
function sk_enqueue_flexbox_grid() {

	wp_enqueue_style( 'flexboxgrid', CHILD_URL . '/css/flexboxgrid.min.css' );

}

Bước 3

Thêm đánh dấu cần thiết để hiển thị nội dung mong muốn của bạn dưới dạng lưới bằng cách làm theo các ví dụ trên trang web của Flexbox Grid.

Bán tại.:

<div class="flexbox-grid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-10">
<div class="box-row"></div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
<div class="box-row"></div>
</div>
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-11">
<div class="box-row"></div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-6 col-md-8 col-lg-10">
<div class="box-row"></div>
</div>
<div class="col-xs-2 col-sm-6 col-md-4 col-lg-2">
<div class="box-row"></div>
</div>
</div>
</div>

Không cần phải nói, nếu bạn đang đặt HTML tương tự như trên trong trình chỉnh sửa Bài đăng / Trang của WP, nó sẽ ở dạng xem Văn bản chứ không phải ở dạng Trực quan.

Bước 4

Thêm phần sau vào style.css của chủ đề con và sửa đổi cho phù hợp:

.flexbox-grid {
	margin-top: 40px;
}

.box-row {
	padding: 20px;
	margin-bottom: 20px;
	background-color: #007fff;
	border-radius: 2px;
}

.flexbox-grid p {
	margin-bottom: 0;
}