photo grid https://digitrends.com.vn

photo grid

/* Affiliate disclosure note
------------------------------------------------------ */
.photo-grid {
    padding-top: 40px;
    clear: both;
}

.photo-grid .wrap {
    background: #fff;
	border-radius: 2px;
}

.photo-grid .wrap .widget {
    margin-bottom: 1px;
	word-wrap: break-word;
}

.guideicons {
    margin: 2px;
    padding: 2px;
    text-align: center;
}

.photo-grid a.guideicon {
    text-align: center;
    display: inline-block;
    width: 10%;
    color: #666;
    margin: 25px 0;
}

.photo-grid a.pc:before {
    content: "\f26c";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

.photo-grid a.laptop:before {
    content: "\f109";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

.photo-grid a.tablet:before {
    content: "\f10a";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

.photo-grid a.mobile:before {
    content: "\f10b";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

.photo-grid a.camera:before {
    content: "\f030";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

.photo-grid a.video:before {
    content: "\f03d";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

.photo-grid a.tulanh:before {
    content: "\f2ce";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}    

.photo-grid a.maygiat:before {
    content: "\f001";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

.photo-grid a.dieuhoa:before {
    content: "\f11b";
    font-family: FontAwesome;
    font-size: 36px;
    color: #5d1408;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}

@media only screen and (max-width: 960px) { 
.photo-grid {
    padding-top: 12px;
    clear: both;
}

.photo-grid a.guideicon {
    text-align: center;
    display: inline-block;
    width: 30%;
    color: #666;
    margin: 25px 0;
}}



/////////// html


<div class="guideicons">
		<a href="https://digitrends.com.vn/may-tinh-ban-tot-nhat.html" class="guideicon pc">PC</a>
		<a href="https://digitrends.com.vn/laptop-tot-nhat.html" class="guideicon laptop">Laptop</a>
		<a href="https://digitrends.com.vn/may-tinh-bang-tot-nhat.html" class="guideicon tablet">Tablet</a>
		<a href="https://digitrends.com.vn/dien-thoai-tot-nhat.html" class="guideicon mobile">Điện thoại</a>
		<a href="https://digitrends.com.vn/may-anh-tot-nhat.html" class="guideicon camera">Máy ảnh</a>
		<a href="https://digitrends.com.vn/may-quay-phim-tot-nhat.html" class="guideicon video">Quay phim</a>
		<a href="https://digitrends.com.vn/tu-lanh-tot-nhat.html" class="guideicon tulanh">Tủ lạnh</a>
		<a href="https://digitrends.com.vn/may-giat-tot-nhat.html" class="guideicon maygiat">Máy giặt</a>
		<a href="https://digitrends.com.vn/dieu-hoa-tot-nhat.html" class="guideicon dieuhoa">Điều hòa</a>
</div>

//// functions





// Tạo widget mới
genesis_register_sidebar( array(
	'id'          => 'photo-grid',
	'name'        => __( 'Category Grid', 'theme-name' ),
	'description' => __( 'This is the photo grid widget area.', 'theme-name' ),
) );

// Add photo grid widget area after header.
add_action( 'genesis_after_header', 'sp_photo_grid_widget' );
function sp_photo_grid_widget() {
	genesis_widget_area( 'photo-grid', array(
		'before' => '<div class="photo-grid"><div class="wrap">',
		'after'  => '</div></div>',
	) );
}