Question

我很难弄清楚为什么当我将max-width变量从100％更改为90％时，部分网格会从页面上弹出。如果您需要查看更多代码，请告诉我。非常感谢任何人的帮助，谢谢。

/* Seasonal Events Grid 
-------------------------------*/

div.jk-seasonal > div {
  padding: 0 20px;
  color: #fff;
}

@media screen and (min-width: 1024px) {
* { box-sizing: border-box; }
div.jk-seasonal {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
    display: grid;
  grid-column: repeat(6, 1 fr);
  grid-auto-rows: minmax(100px, auto);
}
}

/* Seasonal Event1 - Big One
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event1 {
 grid-column: span 1 / 2;
 grid-row: 1 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner11.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 500px;
 margin:5px;
}
}


/* Seasonal Event2 - Middle Top
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event2 {
 grid-column: 2 / 3;
 grid-row: 1 / 4;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner6.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 300px;
 margin:5px;
}
}


/* Seasonal Event3 - bottom right
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event3 {
 grid-column: 3 / 3;
 grid-row: 4 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner6.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 300px;
 margin:5px;
}
}


/* Seasonal Event4 - Bottom middle
-------------------------------*/

@media screen and (min-width: 1024px) {
/* For desktop: */
.jk-event4 {
 grid-column: 2 / 3;
 grid-row: 4 / 7;
 background-image: url("http://www.jacquelinekennedy.co.uk/wp-content/uploads/2017/10/jacqueline-kennedy-banner6.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
 max-width: 100%;
 min-width: 300px;
 margin:5px;
}
}



div.jk-seasonal > div {
    padding: 0 10px;
}

<div class="jk-seasonal">
  <div class="jk-event1"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-vip-wimbledon-tickets"><h3>Strawberries<br>and<br>Perfect Seats</h3></a><p class="jk-seasonal-text">Have the wedding of your dreams professionally planned and managed making sure your special day goes the way you planned.</p><button class="w3-button w3-round">More Information</button>
</div>
  <div class="jk-event2"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-event2"><h4>Event 2<br>Name</h4></a><button class="w3-button w3-round">More Information</button></div>
  <div class="jk-event3"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-event3"><h4>Event 3<br>Name</h4></a><button class="w3-button w3-round">More Information</button></div>
  <div class="jk-event4"><a href="http://www.jacquelinekennedy.co.uk/" id="jacqueline-kennedy-event4"><h4>Event 4<br>Name</h4></a><button class="w3-button w3-round">More Information</button></div>
</div>

at 100% Max-width

at 90% width

在使用“ fr” ive时，我也似乎在wordpress自定义css区域中出现错误：

When I put the space in to remove the error the grid does not work anymore

最大宽度网格问题-更改为90％时会离开页面

0 个答案: