使用CSS Grid折叠响应式布局时出现问题

Question

我使用CSS Grid进行布局。也许我只是不正确地铺设东西，但是我希望我的导航在最小宽度（＆lt; 22.5em）下折叠成2列和2行，然后扩展到1列，在更大的宽度处排成1行（ ＆gt; 22.5em）。

但我的导航也在我自己的标题中单独的列和行（更改宽度）。如何在保持宽幅设备的样式的同时实现这一目标？

这是我想要的一个例子＆lt; 22.5 em：

This is the site currently

这是我的代码：

＆＃13;

＆＃13;

/* CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Global styles */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 1em;
  color: #222;
}

a, a.visited {
	display: block;
	text-decoration: none;
}

p, blockquote {
  padding: 0.625em;
}

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

h1, h2, h3 {
  font-family: "acumin-pro-extra-condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
	margin: 0;
}

h1 {
	color: hsl(45, 100%, 50%);
}

h1 a, h1 a:visited {
  color: inherit;
}

h2 {
  color: hsl(26, 64%, 31%);
  padding-bottom: 0.2em;
}

header {
	display: grid;
	grid-template-rows: auto;
}

nav ul {
	margin: 0;
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

nav li {
  width: 25%;
  text-align: center;
}

.logo {
	padding: 0.625em;
	grid-column: 1;
}

.logo, .title {
	grid-row: 1;
	justify-self: center;
	align-self: center;
}

.title {
	grid-column: 2;
}

nav a:hover, nav a:visited:hover {
  color: rgb(255, 207, 64);
}

.about, .testimonials, .contact {
  padding: 1.25em;
}

.testimonials {
  background-color: rgb(255, 220, 115);
}

.gallery {
	display: grid;
	grid-gap: 0.625em;
}

.gallery h2, .form h2 {
  display: none;
}

.form label {
  visibility: hidden;
}

.form label:nth-of-type(5) {
  font-family: Lato, sans-serif;
  font-size: 0.8em;
  visibility: visible;
}

footer {
  color: #eee;
  padding: 0.625em;
  background-color: rgb(40, 40, 40);
}

footer a, footer a:visited, footer .fa {
  font-style: normal;
  color: #eee;
  text-decoration: none;
  padding: 0.625em;
}

/* Mobile Styles */
header {
	grid-template-columns: 25% 75%;
}

nav {
	grid-column: 1 / 3;
	grid-row: 2;
}

nav ul {
  margin: 0;
  padding: 1.25em;
  background-color: rgb(40, 40, 40);
}

nav a, nav a:visited {
  color: #eee;
}

.banner {
	display: none;
}

main, footer, h1 {
  line-height: 1.25em;
}

h1 {
	font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

.gallery {
	grid-template-columns: 0 repeat(3, 1fr) 0;
	grid-template-rows: 0 repeat(2, 1fr) 0;
}

.pup1, .pup2, .pup3 {
	grid-row: 2;
}

.pup1 {
	grid-column: 2 / 3;
}

.pup2 {
	grid-column: 3 / 4;
}

.pup3 {
	grid-column: 4 / 5;
}

.pup4, .pup5, .pup6 {
	grid-row: 3;
}

.pup4 {
	grid-column: 2 / 3;
}

.pup5 {
	grid-column: 3 / 4;
}

.pup6 {
	grid-column: 4 / 5;
}

.contact {
  padding: 1.25em 1.25em 0 1.25em;
}

.form {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  overflow: hidden;
  padding: 0 1.25em 1.25em 1.25em;
}

.form form {
  width: 100%;
  padding: 0;
  font-family: Lato, sans-serif;
  display: inline-block;
  font-size: 1em;
}

.form input[type=text], .form input[type=tel], .form input[type=email], .form textarea {
  border: 1px solid #bfbfbf;
  padding: 1.25em;
  display: block;
}

.form input[type=text], .form input[type=tel], .form input[type=email] {
  border: 1px solid #bfbfbf;
  width: 70%;
}

.form textarea {
  border: 1px solid #bfbfbf;
  width: 90%;
}

.form input[type=submit] {
  display: block;
  width: 90%;
  border: 1px solid #bfbfbf;
  background-color: #eee;
  padding: 0.3125em;
}

footer {
  text-align: center;
}

footer ul {
  padding: 0;
}

footer .email, footer .phone {
  text-decoration: underline;
  font-style: normal;
  font-size: 1.2em;
  color: rgb(255, 220, 115);
}

footer li {
  padding: 0.3125em;
}

footer .fa {
  font-size: 2em;
  padding-left: 0.625em;
  padding-right: 0.625em;
}

footer .socialMedia li {
  display: inline;
}

/* Larger Phone Styles */
@media (min-width: 22.5em) and (max-width: 47.99em) {
	header {
			grid-template-columns: 25% 75%;
		}

	h1 {
		  font-size: 3em;
		}
}

/* Tablet Styles */
@media (min-width: 48em) and (max-width: 63.99em) {
	h1 {
		font-size: 4em;
		line-height: 1.125em;
	}
}

/* Desktop Styles */
@media (min-width: 64em) {
	header {
		grid-template-columns: 14% 42% 43%;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	nav {
		grid-column: 3;
		grid-row: 1;
	}

	nav ul {
		background-color: transparent;
		padding: 0;
	}

	nav a, nav a:visited {
		color: rgb(40, 40, 40);
		text-transform: uppercase;
	}

	body {
		line-height: 1.375em;
	}

	h1 {
		font-size: 5em;
		line-height: 1.05em;
	}

	main {
		display: grid;
		grid-template-columns: 1.7fr 1fr;
		grid-template-rows: auto;
	}

	.banner {
		display: initial;
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.about {
		grid-column: 1;
		grid-row: 2;
	}

	.testimonials {
		grid-column: 2;
		grid-row: 2;
		background-color: transparent;
	}

	.gallery {
		grid-template-columns: 0 repeat(6, 1fr) 0;
		grid-template-rows: 0 1fr 0;
	}

	.pup1 {
		grid-column: 2 / 3;
		grid-row: 2;
	}

	.pup2 {
		grid-column: 3 / 4;
		grid-row: 2;
	}

	.pup3 {
		grid-column: 4 / 5;
		grid-row: 2;
	}

	.pup4 {
		grid-column: 5 / 6;
		grid-row: 2;
	}

	.pup5 {
		grid-column: 6 / 7;
		grid-row: 2;
	}

	.pup6 {
		grid-column: 7 / 8;
		grid-row: 2;
	}
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Madeline Jones -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Sunny Shepherds is a world class German Shepherd breeder that serves the entire region of South Florida.">
  <!-- Adds in social media icons -->
  <script src="https://use.fontawesome.com/c60523e346.js"></script>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Adds in header font -->
  <script src="https://use.typekit.net/wao1zsr.js"></script>
  <script>try{Typekit.load({ async: true });}catch(e){}</script>
  <!-- Adds in body font -->
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <!--[if lt IE 9]><script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script><![end if]-->
  <title>Sunny Shepherds | German Shepherd Breeder</title>
</head>
<body>
  <header>
    <div class="logo">
      <a href="index.html"><img src="img/logo.png" alt="Sunny Shepherds Logo"></a>
    </div>
    <div class="title">
      <h1><a href="index.html">Sunny Shepherds</a></h1>
    </div>
    <nav>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="breedInfo.html">Breed Info</a></li>
        <li><a href="ourDogs.html">Our Dogs</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="banner">
      <img src="img/farm.png" alt="Our sunny farm located in Miami, Florida">
    </div>
    <section class="about">
      <h2>About Us</h2>
      <p>Sunny Shepherds takes great pride in producing <strong>top-of-the-line working dogs</strong>, regardless of the task at hand. We produce dogs for sport, police work, family protection, and any other area where the dog makes the difference.</p>

      <p>We only breed dogs that have had rigid testing done by outside sources, as well as our own evaluation. Such testing covers <strong>healthy hips and elbows</strong>, genetic defects of the ears, allergies, working drives, social skills and coat type.</p>

      <p>All of our dogs are kept on our sunny and spacious facility grounds. Each of them are reared in a loving, family environment with a lot of stimulation. We introduce them to a variety of environments and situations so that they are well suited to any home.</p>
    </section>
    <section class="testimonials">
      <h2>Testimonials</h2>
      <blockquote>
        <q>Very helpful and amazing service. My family bought a puppy from here and we are very satisfied. Thank you so much Sunny Shepherds for the beautiful pup. Highly recommend this place.</q> &mdash; Victoria Langston
      </blockquote>
      <blockquote>
        <q>Recently bought a puppy from Sunny Shepherds and I couldn't be happier!! Cooper is growing up to be a beautiful dog and a huge part of our family. Thank you so much for your professionalism and all your knowledge.</q> &mdash; James Reed
      </blockquote>
    </section>
  </main>
  <section class="gallery">
    <h2>Our Puppies</h2>
      <div class="pup1">
        <img src="img/pup_1.png" alt="3 week old sable puppy">
      </div>
      <div class="pup2">
        <img src="img/pup_2.png" alt="5 week old blue puppy">
      </div>
      <div class="pup3">
        <img src="img/pup_3.png" alt="9 week old black-and-tan puppy">
      </div>
      <div class="pup4">
        <img src="img/pup_4.png" alt="5 week old black-and-tan puppy">
      </div>
      <div class="pup5">
        <img src="img/pup_5.png" alt="7 week old black-and-tan puppy">
      </div>
      <div class="pup6">
        <img src="img/pup_6.png" alt="6 week old black-and-tan puppy">
      </div>
  </section>
  <footer>
    <address>
      <ul>
        <li><span class="email">E-mail</span></li>
        <li><a href="mailto:contact@sunnyshepherds.com">contact@sunnyshepherds.com</a></li>
      </ul>
      <ul>
        <li><span class="phone">Phone</span></li>
        <li><a href="tel:954-555-5555">(954) 555-5555</a></li>
      </ul>
      <ul class="socialMedia">
        <li><a href="#" class="fa fa-facebook"></a></li>
        <li><a href="#" class="fa fa-twitter"></a></li>
        <li><a href="#" class="fa fa-instagram"></a></li>
      </ul>
    </address>
  </footer>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于您已经在使用nav元素，因此不需要嵌套ul。所以我的第一个建议就是清理导航结构。

而不是：

<nav>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="breedInfo.html">Breed Info</a></li>
    <li><a href="ourDogs.html">Our Dogs</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

请使用：

<nav>
  <a href="about.html">About</a>
  <a href="breedInfo.html">Breed Info</a>
  <a href="ourDogs.html">Our Dogs</a>
  <a href="contact.html">Contact</a>
</nav>

我还会删除围绕其他关键元素的额外包装器。它们是不必要的混乱（除非你有特殊的理由添加额外的包装）。

然后，因为您在导航项上使用了flex属性，所以实际上您不需要调整网格规则。可以通过调整弹性规则来实现2x2导航项网格。

这将在较大的屏幕上连续显示四个导航项：

nav {
  display: flex;
}

nav > a {
  flex: 0 0 25%; /* flex-grow, flex-shrink, flex-basis */
}

这将在较小的屏幕上为您提供2x2的导航项目网格：

  nav {
    display: flex;
    flex-wrap: wrap;
  }

  nav > a {
    flex: 0 0 50%;
  }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 1em;
  color: #222;
  line-height: 1;
}

a,
a.visited {
  display: block;
  text-decoration: none;
}

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

h1 {
  font-family: "acumin-pro-extra-condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
  color: hsl(45, 100%, 50%);
}

h1 a,
h1 a:visited {
  color: inherit;
}

header {
  display: grid;
  grid-template-rows: auto;
}

nav {
  display: flex;
  justify-content: center;
}

nav>a {
  flex: 0 0 25%;
  text-align: center;
}

.logo {
  padding: 0.625em;
  grid-column: 1;
}

.logo,
.title {
  justify-self: center;
  align-self: center;
}

.title {
  grid-column: 2;
}

nav a:hover,
nav a:visited:hover {
  color: rgb(255, 207, 64);
}


/* Mobile Styles */

header {
  grid-template-columns: 25% 75%;
}

nav {
  grid-column: 1 / 3;
  grid-row: 2;
  margin: 0;
  padding: 1.25em;
  background-color: rgb(40, 40, 40);
  flex-wrap: wrap;
}

nav a,
nav a:visited {
  color: #eee;
  flex: 0 0 50%;
  padding: 25px;
}

h1 {
  line-height: 1.25em;
  font-size: 2.5em;
}


/* Larger Phone Styles */

header {
  grid-template-columns: 25% 75%;
}

h1 {
  font-size: 3em;
}


/* Tablet Styles */

@media (min-width: 48em) and (max-width: 63.99em) {
  h1 {
    font-size: 4em;
    line-height: 1.125em;
  }
}


/* Desktop Styles */

@media (min-width: 64em) {
  header {
    grid-template-columns: 14% 42% 43%;
    align-items: center;
  }
  nav {
    grid-column: 3;
    grid-row: 1;
    background-color: transparent;
  }
  nav a,
  nav a:visited {
    color: rgb(40, 40, 40);
    text-transform: uppercase;
    padding: 0;
    flex: auto;
  }
  body {
    line-height: 1.375em;
  }
  h1 {
    font-size: 5em;
    line-height: 1.05em;
  }
}

<header>
  <a href="index.html" class="logo">
    <img src="http://www.public.asu.edu/~mrjone21/SunnyShepherds/img/logo.png" alt="Sunny Shepherds Logo">
  </a>
  <h1 class="title">
    <a href="index.html">Sunny Shepherds</a>
  </h1>
  <nav>
    <a href="about.html">About</a>
    <a href="breedInfo.html">Breed Info</a>
    <a href="ourDogs.html">Our Dogs</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

jsFiddle