我正在网站上使用小部件在主页上显示我的Instagram提要。问题是,如果我在Instagram上发布的东西不是正方形,则网格会错位。
这应该看起来像:
如果一幅图像的高度与另一幅图像的高度不同,则外观会这样。
如何防止网格破裂并在不同屏幕尺寸下仍保持良好外观?
CSS
//Instagram
.widget-instagram{
position: relative;
clear: both;
overflow: hidden;
h2{
color: $main-color;
z-index: 1;
font-size: 22px;
font-weight: 300;
text-align: center;
position: relative;
border: none;
margin: 0;
left: 50%;
padding: 37px 74px 39px;
background: rgba(255,255,255,0.91);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
@media(max-width: 991px) {
padding: 20px;
}
i{
font-size: 46px;
display: block;
text-align: center;
margin-bottom: 20px;
@media(max-width: 991px) {
font-size: 35px;
}
}
}
.instagram-slide{
margin: 0px;
>a{
width: 16.6666667%;
padding: 0px;
float: left;
display: block;
@include transition(all 0.3s ease);
@media(max-width: 767px) {
width: 25%;
}
@media(max-width: 479px) {
width: 50%;
}
&:hover {
opacity: .7;
}
img{
display: block;
width: 100%;
}
.ss_likes{
display: none;
}
}
}
}
html
<div class="widget-instagram no-margin">
<div class="widget-content">
<div class="instagram">
<div class="title">
<h2>
<i class="fa fa-instagram"></i>
<span> {{ section.settings.title }}</span>
</h2>
</div>
<div class="block-content">
<div id="instafeed{{ section.id }}" class="instagram-slide"
data-id="instafeed{{ section.id }}"
data-userid="{{ section.settings.userid }}"
data-accesstoken="{{ section.settings.accessToken }}"
data-limit="{{ section.settings.limited }}"
data-resolution="{{ section.settings.resolution }}"
data-navigation="{{ section.settings.navigation }}">
</div>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "Home Page Instagram",
"class": "home-section gallery-section",
"settings": [
{
"type": "text",
"id": "title",
"placeholder": "Title for Block",
"label": "Title",
"default": "FOLLOW US BY INSTAGRAM"
},
{
"type": "checkbox",
"id": "navigation",
"label": "Show navigation"
},
{
"type": "text",
"id": "userid",
"label": "User Id (*)",
"placeholder": "User Id",
"default": "4894431401",
"info": "[Where do I find User ID?](https:\/\/smashballoon.com\/instagram-feed\/find-instagram-user-id\/)"
},
{
"type": "text",
"id": "accessToken",
"label": "Access Token (*)",
"placeholder": "Access Token",
"default": "4894431401.1677ed0.686c4b5fed2a4983bde609e1016b150f",
"info": "[Where do I find Access Token?](http:\/\/instagram.pixelunion.net\/)"
},
{
"type": "text",
"id": "limited",
"placeholder": "Ex:8",
"label": "Limit The Number of Images",
"default": "10"
},
{
"type": "select",
"id": "resolution",
"label": "Resolution of images",
"options": [
{
"value": "thumbnail",
"label": "Thumbnail (150x150)"
},
{
"value": "low_resolution",
"label": "Low Resolution (320x320)"
},
{
"value": "standard_resolution",
"label": "Standard Resolution (640x640)"
}
]
}
],
"presets": [
{
"name": "Home Page Instagram",
"category": "Instagram"
}
]
}
{% endschema %}
您可以通过在网格模板区域和媒体查询中定义列来做出响应。在下面查看响应式网格演示
index.html]
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class = "grid">
<div class = "grid-item grid-item-1"> 1 </div>
<div class = "grid-item grid-item-2"> 2 </div>
<div class = "grid-item grid-item-3"> 3 </div>
<div class = "grid-item grid-item-4"> 4 </div>
</div>
</body>
</html>
style.css
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 1fr);
grid-template-rows: repeat(2, 250px);
grid-template-areas:
"item1 item2 item3"
"item4 item4 item4";
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.grid-item {
background-color: #2ecc71;
color: #fff;
font-size: 30px;
}
.grid-item-1 {
grid-area: item1;
}
.grid-item-2 {
grid-area: item2;
}
.grid-item-3 {
grid-area: item3;
}
.grid-item-4 {
grid-area: item4;
}
@media(max-width: 720px) {
.grid {
grid-template-areas:
"item1 item2"
"item3 item4";
}
}
Check out the live version in plunker here
希望它能解决您的查询:)