html - 最小化网格 CSS 的麻烦

宽度和行高应该具有灵活的值以便能够适应：例如：

.wrapper {
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  grid-template-rows: minmax(250px,1fr) minmax(250px,1fr);/* allow the rows to grow */
  grid-template-areas: "box-1 box-2 box-4" "box-1 box-3 box-5";
  width: 1500px;
  max-width:94%;/* 100% should be a max to be seen without overflow, les than 100% will leave some margin on the sides. pickup the value that fits the best  your needs */

}

见：https ://developer.mozilla.org/en-US/docs/Web/CSS/minmax

minmax()CSS 函数定义了大于等于 min 且小于等于 max 的大小范围。它与 CSS 网格一起使用。

// JavaScript Document
var slidesWrapper = $('.cd-hero-slider');

//check if a .cd-hero-slider exists in the DOM
if (slidesWrapper.length > 0) {

  var sliderNav = $('.cd-slider-nav');
  var slidesNumber = slidesWrapper.children('li').length;
  var visibleSlidePosition = 0;
  var autoPlayId;
  var autoPlayDelay = 5000;

  // autoplay slider
  setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

  // change visible slide
  sliderNav.on('click', 'a', function(event) {
    event.preventDefault();

    var selectedItem = $(this);

    if (!selectedItem.hasClass('selected')) {

      // if it's not already selected
      var selectedPosition = selectedItem.index();
      var activePosition = slidesWrapper.find('li.selected').index();

      if (activePosition < selectedPosition) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
      }

      //this is used for the autoplay
      visibleSlidePosition = selectedPosition;

      updateSliderNavigation(sliderNav, selectedPosition);
      setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
    }
  });
}

function nextSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
}

function prevSlide(visibleSlide, container, pagination, n) {
  visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
    visibleSlide.removeClass('is-moving');
  });

  container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
}

function updateSliderNavigation(pagination, n) {
  var navigationDot = pagination.find('.selected');
  navigationDot.removeClass('selected');
  pagination.find('a').eq(n).addClass('selected');
}

// autoplay
function setAutoplay(wrapper, length, delay) {
  if (wrapper.hasClass('autoplay')) {
    clearInterval(autoPlayId);
    autoPlayId = window.setInterval(function() {
      autoplaySlider(length)
    }, delay);
  }
}

function autoplaySlider(length) {
  if (visibleSlidePosition < length - 1) {
    nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
    visibleSlidePosition += 1;
  } else {
    prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
    visibleSlidePosition = 0;
  }
  updateSliderNavigation(sliderNav, visibleSlidePosition);
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2c343b;
  background-color: #f2f2f2;
}

a {
  color: #d44457;
  text-decoration: none;
}

img {
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.cd-hero {
  height: 300px;
  width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgba(0, 0, 0, 0.03);
}

.cd-hero-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.cd-hero-slider li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.cd-hero-slider li.selected {
  /* this is the visible slide */
  position: relative;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.move-left {
  /* slide hidden on the left */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.cd-hero-slider li.is-moving,
.cd-hero-slider li.selected {
  /* the is-moving class is assigned to the slide which is moving outside the viewport */
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}

/* --------------------------------

Single slide style

-------------------------------- */

.cd-hero-slider li {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.cd-hero-slider .cd-full-width,
.cd-hero-slider .cd-half-width {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.cd-hero-slider .cd-half-width {
  width: 45%;
}

.cd-hero-slider .cd-half-width:first-of-type {
  left: 5%;
}

.cd-hero-slider .cd-half-width:nth-of-type(2) {
  right: 5%;
  left: auto;
}

.cd-hero-slider .cd-content {
  position: relative;
  top: calc(50% - 30px);
  transform: translateY(-52%) !important;
  padding: 0 50px;
}

/*
    animations & transitions
*/

.cd-hero-slider .cd-half-width {
  opacity: 0;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
  transform: translateX(40px);
}

.cd-hero-slider .move-left .cd-half-width {
  -webkit-transform: translateX(-40px);
  -moz-transform: translateX(-40px);
  -ms-transform: translateX(-40px);
  -o-transform: translateX(-40px);
  transform: translateX(-40px);
}

.cd-hero-slider .selected .cd-half-width {
  /* this is the visible slide */
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider .is-moving .cd-half-width {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
  -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
  -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
  transition: opacity 0s 0.5s, transform 0s 0.5s;
}

.cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
.cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
  -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}

.cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
.cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
  /* this is the selected slide - different animation if it's entering from left or right */
  -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
  -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s;
  transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
}

.cd-hero-slider .cd-full-width h1,
.cd-hero-slider .cd-full-width h2,
.cd-hero-slider .cd-full-width h3,
.cd-hero-slider .cd-full-width h4,
.cd-hero-slider .cd-full-width h5,
.cd-hero-slider .cd-full-width h6,
.cd-hero-slider .cd-full-width p,
.cd-hero-slider .cd-full-width a,
.cd-hero-slider .cd-full-width .button {
  opacity: 0;
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  -o-transform: translateX(100px);
  transform: translateX(100px);
}

.cd-hero-slider .move-left .cd-full-width h1,
.cd-hero-slider .move-left .cd-full-width h2,
.cd-hero-slider .move-left .cd-full-width h3,
.cd-hero-slider .move-left .cd-full-width h4,
.cd-hero-slider .move-left .cd-full-width h5,
.cd-hero-slider .move-left .cd-full-width h6,
.cd-hero-slider .move-left .cd-full-width p,
.cd-hero-slider .move-left .cd-full-width .button {
  opacity: 0;
  -webkit-transform: translateX(-100px);
  -moz-transform: translateX(-100px);
  -ms-transform: translateX(-100px);
  -o-transform: translateX(-100px);
  transform: translateX(-100px);
}

.cd-hero-slider .selected .cd-full-width h1,
.cd-hero-slider .selected .cd-full-width h2,
.cd-hero-slider .selected .cd-full-width h3,
.cd-hero-slider .selected .cd-full-width h4,
.cd-hero-slider .selected .cd-full-width h5,
.cd-hero-slider .selected .cd-full-width h6,
.cd-hero-slider .selected .cd-full-width p,
.cd-hero-slider .selected .cd-full-width .button {
  /* this is the visible slide */
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.cd-hero-slider li.is-moving .cd-full-width h1,
.cd-hero-slider li.is-moving .cd-full-width h2,
.cd-hero-slider li.is-moving .cd-full-width h3,
.cd-hero-slider li.is-moving .cd-full-width h4,
.cd-hero-slider li.is-moving .cd-full-width h5,
.cd-hero-slider li.is-moving .cd-full-width h6,
.cd-hero-slider li.is-moving .cd-full-width p,
.cd-hero-slider li.is-moving .cd-full-width .button {
  /* this is the slide moving outside the viewport
    wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
  -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
  -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s;
  transition: opacity 0s 0.5s, transform 0s 0.5s;
}

/* different timings for different elements */

.cd-hero-slider li.selected h1,
.cd-hero-slider li.selected h2,
.cd-hero-slider li.selected h3,
.cd-hero-slider li.selected h4,
.cd-hero-slider li.selected h5,
.cd-hero-slider li.selected h6 {
  -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
  -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s;
  transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}

.cd-hero-slider li.selected p {
  -webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s;
  -moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s;
  transition: opacity 0.4s 0.3s, transform 0.5s 0.3s;
}

.cd-hero-slider li.selected .button,
.cd-hero-slider li.selected input[type="button"],
.cd-hero-slider li.selected button {
  -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s;
  -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s;
  transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;
}

/*
    slider navigation
*/

.cd-slider-nav {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 2;
  text-align: center;
  height: 30px;
}

.cd-slider-nav nav {
  display: inline-block;
  position: relative;
  height: 100%;
}

.cd-slider-nav a {
  display: inline-block;
  float: left;
  width: 15px;
  height: 15px;
  margin: 5px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}

.cd-slider-nav a.selected {
  background-color: rgba(0, 0, 0, 0.5);
}

/* --------------------------------

Javascript disabled

-------------------------------- */

.no-js .cd-hero-slider li {
  display: none;
}

.no-js .cd-hero-slider li.selected {
  display: block;
}

.no-js .cd-slider-nav {
  display: none;
}

@import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
body {
  margin: 0px 0px 0px 0px;
}

.nav2 {
  width: 100%;
  transition: top 0.2s ease-out;
}

.banner {
  text-align: center;
  width: 100%;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}

.nav2 ul#menu {
  padding-left: 0;
  display: flex;
}

.nav2 .ul2 .li2 {
  flex-grow: 1;
}

.nav-bar {
  /* Rectangle 1: */
  background: #FFFFFF;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11), 0px 4px 6px 0px rgba(0, 0, 0, 0.11);
  width: 100%;
  text-align: center;
}

//-------------------------------------------------------
/*Strip the ul of padding and list styling*/

.ul2 {
  list-style-type: none;
  margin: 0;
  position: absolute;
}

/*Create a horizontal list with spacing*/

.li2 {
  display: inline-block;
  float: center;
}

/*Style for menu links*/

.li2 .a2 {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}

/*Hover state for top level links*/

.li2:hover .a2 {
  background: #19c589;
}

/*Style for dropdown links*/

.li2:hover .ul2 .a2 {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}

/*Hover state for dropdown links*/

.li2:hover .ul2 .a2:hover {
  background: #19c589;
  color: #fff;
}

/*Hide dropdown links until they are needed*/

.li2 .ul2 {
  display: none;
}

/*Make dropdown links vertical*/

.li2 .ul2 .li2 {
  display: block;
  float: none;
}

/*Prevent text wrapping*/

.li2 .ul2 .li2 .a2 {
  width: auto;
  min-width: 100px;
}

/*Display the dropdown on hover*/

.ul2 .li2 .a2:hover+.hidden,
.hidden:hover {
  display: block;
}

/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}

/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}

/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked~#menu {
  display: block;
}

/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  .nav2 .ul2#menu {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  .li2 {
    margin-bottom: 0px;
  }
  /*Make all menu links full width*/
  .ul2 .li2,
  .li2 .a2 {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
}

.hero-image {
  /* The image used */
  /* Set a specific height */
  height: 50%;
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  vertical-align: top;
}

#menu {
  margin: 0;
}

@charset "UTF-8";
/* CSS Document */

.wrapper {
  display: grid;
  grid-template-columns: 40% 1fr 1fr;
  grid-template-rows: minmax(250px,1fr) minmax(250px,1fr);
  grid-template-areas: "box-1 box-2 box-4" "box-1 box-3 box-5";
  width: 1500px;
  max-width:94%;
}

.box-1 {
  grid-area: box-1;
  background-color: #e5e5e5;
}

.box-2 {
  grid-area: box-2;
  background-color: #ffbe88;
}

.box-3 {
  grid-area: box-3;
  background-color: #8ae1ff;
}

.box-4 {
  grid-area: box-4;
  background-color: #ff8a8a;
}

.box-5 {
  grid-area: box-5;
  background-color: #8aff95;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.btn {
  background-color: white;
  border: 1px solid #cccccc;
  color: #696969;
  padding: 0.5rem;
  text-transform: lowercase;
}

.btn--block {
  display: block;
  width: 100%;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards__item {
  display: flex;
  padding: 1rem;
}

@media (min-width: 40rem) {
  .cards__item {
    width: 50%;
  }
}

@media (min-width: 56rem) {
  .cards__item {
    width: 33.3333%;
  }
}

.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card:hover .card__image {
  -webkit-filter: contrast(100%);
  filter: contrast(100%);
}

.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  -webkit-filter: contrast(70%);
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}

.card__image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

@media (min-width: 40rem) {
  .card__image::before {
    padding-top: 66.6%;
  }
}

.card__image--flowers {
  background-image: url(https://unsplash.it/800/600?image=82);
}

.card__image--river {
  background-image: url(https://unsplash.it/800/600?image=11);
}

.card__image--record {
  background-image: url(https://unsplash.it/800/600?image=39);
}

.card__image--fence {
  background-image: url(https://unsplash.it/800/600?image=59);
}

.card__title {
  color: #696969;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.card__text {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">



    <nav class="nav2">
      <div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></div>
      <div class="nav-bar"> <label for="show-menu" class="show-menu">Show Menu</label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu" class="ul2">
          <li class="li2"><a href="#" class="a2">Home</a></li>
          <li class="li2">
            <a href="#" class="a2">About</a>
          </li>
          <li class="li2">
            <a href="#" class="a2">Portfolio</a>
          </li>
          <li class="li2"><a href="#" class="a2">News</a></li>
          <li class="li2"><a href="#" class="a2">Contact</a></li>
        </ul>
      </div>
    </nav>
    <section class="cd-hero">

      <ul class="cd-hero-slider autoplay">

        <li class="selected" style="background-color:#3498db">
          <div class="cd-full-width">
            <div class="cd-content">
              <h2>slide content</h2>
            </div>
          </div>
        </li>

        <li style="background-color:#34495e">
          <div class="cd-half-width">
            <div class="cd-content">
              <h2>slide content</h2>
            </div>
          </div>

          <div class="cd-half-width cd-img-container">
            <div class="cd-content">
              <h2>slide content</h2>
            </div>
          </div>
        </li>

        <li style="background-color:#e67e22">
          <div class="cd-half-width cd-img-container">
            <div class="cd-content">
              <h2>slide content</h2>
            </div>
          </div>

          <div class="cd-half-width">
            <div class="cd-content">
              <h2>slide content</h2>
            </div>
          </div>
        </li>

        <li style="background-color:#2ecc71">
          <div class="cd-full-width">
            <div class="cd-content">
              <h2>slide content</h2>
            </div>
          </div>
        </li>

        <li style="background-color:#9b59b6">
          <div class="cd-full-width">
            <div class="cd-content">
              <h2>slide content</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem commodi corporis, dignissimos dolorem doloremque eveniet explicabo minima, nihil pariatur, porro possimus rem voluptatem? A dignissimos inventore necessitatibus vel veritatis.</p>
            </div>
          </div>
        </li>


      </ul>

      <div class="cd-slider-nav">

        <!--<span class="cd-marker"></span>-->
        <nav>
          <a href="#0" class="selected"></a>
          <a href="#0"></a>
          <a href="#0"></a>
          <a href="#0"></a>
          <a href="#0"></a>
        </nav>
      </div>
      <!-- .cd-slider-nav -->
    </section>

    <div align="center" style="padding-top: 60px;">
      <div class="wrapper">

        <div class="box-1">
          <h1>
            <font face="impact">WELCOME PERSON</font>
          </h1>
          </br>
          <p>
            <font face="impact" size="+2">Cupcake ipsum dolor sit. Amet lemon drops apple pie chocolate. Pudding tart gummi bears. Lollipop fruitcake I love cake cookie. Carrot cake I love pie jujubes bear claw tart chocolate bear claw. Ice cream sweet roll gingerbread gingerbread
              tart chupa chups cake. Pastry apple pie tiramisu jelly beans caramels jelly. Cheesecake tootsie roll icing. Cake donut jelly beans oat cake caramels oat cake sesame snaps. Pastry candy canes I love cake sesame snaps I love. Cotton candy
              I love jelly ice cream gummi bears fruitcake soufflé. Bonbon I love muffin jelly I love sesame snaps brownie tiramisu liquorice.</font>
          </p>
        </div>
        <div class="box-2" id="one" onClick="one()">
          <h1>
            <font face="impact">Number one</font>
        </div>

        <div class="box-3" id="two" onClick="two()">
          <h1>
            <font face="impact">Number two</font>
        </div>

        <div class="box-4" id="three" onClick="three()">
          <h1>
            <font face="impact">Number three</font>
        </div>

        <div class="box-5" id="four" onClick="four()">
          <h1>
            <font face="impact">Number four</font>
        </div>
      </div>
      <script>
        function one() {
          document.getElementById("one").onclick = alert("one");;
        }

        function two() {
          document.getElementById("two").onclick = alert("two");;
        }

        function three() {
          document.getElementById("three").onclick = alert("three");;
        }

        function four() {
          document.getElementById("four").onclick = alert("four");;
        }

      </script>
      <li class="cards__item">
        <div class="card">
          <div class="card__image card__image--fence"></div>
          <div class="card__content">
            <div class="card__title">Flex</div>
            <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
            <button class="btn btn--block card__btn">Button</button>
          </div>
        </div>
        <div class="card">
          <div class="card__image card__image--fence"></div>
          <div class="card__content">
            <div class="card__title">Flex</div>
            <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
            <button class="btn btn--block card__btn">Button</button>
          </div>
        </div>
        <div class="card">
          <div class="card__image card__image--fence"></div>
          <div class="card__content">
            <div class="card__title">Flex</div>
            <p class="card__text">This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. </p>
            <button class="btn btn--block card__btn">Button</button>
          </div>
        </div>
      </li>
    </div>

https://jsfiddle.net/ojh42pu9/1/

html - 最小化网格 CSS 的麻烦

问题描述

解决方案

推荐阅读