Spacing issue in Nesting Flex Grid Items

Hello, I am facing a spacing issue between my two containers. I am trying to replicate this mock up (https://ibb.co/cy44QdV). Using these guidelines (https://dds.digitalservices.syr.edu/layout/flexbox).
Any suggestions will help. Here is what I have

{% load i18n wagtailcore_tags %}
{% load i18n static %}

<main class="main">

<div class='flex-container'>
 <div class='flex-grid'>
 <div class='flex-grid-item-7-md'>
 <div class='flex-row'>
 <div class='flex-grid-item-7-md '>
 <div class='flex-grid-item'>
 <h3 class='heading-display-h2'>Quick Links</h3>
 <div class='flex-container padding-top-3 padding-bottom-3'>
 <div class='flex-grid'>
 <ul id="sul-policies" class="flex-md flex-justify-center">
 <li class="padding-x-2"> <a href="#"><img src="{% static "img/1.JPG" %}" alt="Staff Directory"></li></a>
 <li class="padding-x-2"> <a href="#"><img src="{% static "img/2.JPG" %}" alt="Booking"></li></a>
 <li class="padding-x-2"> <a href="#"><img src="{% static "img/3.JPG" %}" alt="SC"></li></a>
 <li class="padding-x-2"> <a href="4"><img src="{% static "img/4.JPG" %}" alt="Guides"></li></a>
 </ul>
 </div>
 </div>
 </div> 
 </div>
 <div class='flex-grid-item-5-md '>
 <div class='flex-grid-item'>
 <div class='padding-2 margin-2'>
 <h2 class='heading-display-h2'>Databases</h3>
 <div class='flex-container padding-top-3 padding-bottom-3'>
 <div class='flex-grid'>
 <div class='flex-grid-item'>
 <div class=' padding-2'>
 <div class='display-md-inline-block display-sm-block margin heading-display-h3'><b>Starting Policies</b></div><br>
 Ebsco<br>
 JSTOR<br>
 Proques<br>
 Scopus<br>
 </div>
 </div>
 <div class='flex-grid-item'>
 <div class=' padding-2'>
 <div class='display-md-inline-block display-sm-block margin heading-display-h3'><b>Frequently Used</b></div><br>
 IBISWorld<br>
 Kanopy<br>
 PsycINFO<br>
 New York Times<br>
 WorldCat<br>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class='flex-grid'>
 <!--Flex Box 2-->
 <div class='flex-grid-item'>
 <div class='padding-2 margin-2'> 
 <h2 class='heading-display-h2'>Explore Collections</h3>

 <div class='flex-container padding-top-3'>
 <div class='flex-grid'>
 <div class='flex-grid'>
 <ul id="sul-policies" class="flex-md sul-ul-wrap">
 <li class="padding-x-2 sul-img-size"> <a href="#"><img src="{% static "img/5.JPG" %}" alt="hours" style="min-width: 200px;"></li></a>
 <li class="padding-x-2 sul-img-size"> <a href="#"><img src="{% static "img/6.JPG" %}" alt="Booking" style="min-width: 200px;"></li></a>
 <li class="padding-x-2 sul-img-size"> <a href="#"><img src="{% static "img/7.JPG" %}" alt="SC" style="min-width: 200px;"></li></a>
 <li class="padding-x-2 sul-img-size"> <a href="8"><img src="{% static "img/8.JPG" %}" alt="Guides" style="min-width: 200px;"></li></a>
 </ul>
 </div>


 </div>
 </div></div>
 </div> 
 </div>
 </div>
</div> </main>

Code (markup):

 

Well... the first thing I'd suggest is to stop shitting presentational classes onto everything, particularly tags that really shouldn't have classes in the first place. Likewise, stop crapping static style into the markup. If you're going to have a stylesheet, USE IT.

THEN stop slopping endless pointless DIV with impossible to follow formatting into your page. It also wouldn't hurt if you bothered using something remotely resembling proper semantics instead of tag soup. It's how you've ended up with about 20% more code than you need, and hard to follow code at that.

It also looks like you're trying to use images for some sections that should be text and images. Remember, image only content -- even with title or alt -- is inaccessible junk for a lot of users. If it's text, USE TEXT.

All that said, what you're probably looking for is "gap".

But let's first clean up the markup so it makes sense. I'll use font-awesome for the orange buttons since it's clear that's what the original used.

		<div class="moreInfo">

			<div class="sectionGroup">

				<section id="quickLinks">
					<h2>Quick Links</h2>
					<ul>
						<li>
							<a href="#">
								<i class="fas fa-users"></i>
								Staff Directory
							</a>
						</li><li>
							<a href="#">
								<i class="far fa-calendar-alt"></i>
								Reserve A Room
							</a>
						</li><li>
							<a href="#">
								<i class="fas fa-archive"></i>
								Special Collections
							</a>
						</li><li>
							<a href="#">
								<i class="fas fa-book-open"></i>
								Research Guides
							</a>
						</li>
					</ul>
				<!-- #quickLinks --></section>

				<section id="databases">
					<h2>Databases</h2>
					<div>
						<h3>Starting Points</h3>
						<ul>
							<li>Ebsco</li>
							<li>jSTOR</li>
							<li>Proquest</li>
							<li>Scopus</li>
							<li>Web of Science</li>
						</ul>
					</div><div>
						<h3>Frequently Used</h3>
						<ul>
							<li>IBISWorld</li>
							<li>Kanopy</li>
							<li>PsychINFO</li>
							<li>New York Times</li>
							<li>WorldCat</li>
						</ul>
					</div>
					<span><a href="#" class="readMore">View All Databases</a></span>
				<!-- #databases --></section>

			<!-- .sectionGroup --></div>

			<section id="exploreCollections">
				<h2>Explore Our Collections</h2>
				<a href="#">
					<h3>
						<span>Special Collections</span>
						The Syracuse Hours
					</h3>
					<img
						alt="Archives Buildings"
						src="images/archives-buildings.jpg"
					>
				</a>
				<a href="#">
					<h3>
						<span>Digital Collections</span>
						Belfer Cylinders Digital Connections
					</h3>
					<img
						alt="some random Belfer cylinders"
						src="images/belfer-cylinders.jpg"
					>
				</a>
				<a href="#">
					<h3>
						<span>University Archives</span>
						Buildings of SU
					</h3>
					<img
						alt="Syracuse Hours"
						src="images/syracuse-hours.jpg"
					>
				</a>
				<a href="#">
					<h3>
						<span>Databases</span>
						JSTOR
					</h3>
					<img
						alt="JSTOR Logo"
						src="images/jstor-logo.png"
					>
				</a>
			<!-- #exploreCollections --></section>

		<!-- .moreInfo --></div>

Code (markup):

Notice how I don't slop presentational classes onto everything. REMEMBER, presentational classes are as dumbass and broken as 1990's-style presentational markup. Your classes should whenever possible describe what things ARE, not what you want them to look like. Otherwise you've completely defeated the point of HTML, and why CSS is separate from it!

Check my article on the topic:
https://medium.com/codex/why-presentational-classes-for-html-css-are-ignorant-garbage-bcfdb02ec397

Let's go over it. You don't need to open 6 DIV before you get to your first heading. The outer DIV wraps the whole area and a class -- if any is warranted -- describing what the section IS. Likewise the inner DIV for the first column should be similarly worded, saying what the content is, NOT what you want it to look like!

For the #quickLinks section I give it a meaningful id for styling. This not just clearly says what it is, it also is a hook we can internally link to if desired and/or hook via scripting if needed. I very much doubt ANY page would have a H2 for that H3 to be a subsection of, hence the likely correct depth heading is H2. These are sections, so we'll mark them up as such even though I'm not wild about said tag. It's a list of link so mark it up as such, with TEXT inside them so non-visual users aren't left high and dry by the images and possible incorrect handling of ALT... assuming one even provides any. It's also clear those were font-awesome icons, so apply those instead of images in that section.

#database is similar. It is a SIBLING of quick-links, so it gets the same depth heading. Why you had an H3 followed by an H2 on what are quite clearly structural siblings? I've got no idea. It is clearly broken into two subsections, and as subsections of a H2 each gets started with an H3 since that's what the tag MEANS; the start of a subsection of the H2 preceding it. If you think H1..H6 means fonts in different weights and sizes you've been packed full of manure!. The content are quite obviously lists, so mark them up as lists not just a bunch of <br> separated lines.

Closing out the section group we come to the sibling section which again starts at h2 depth. The styling of these image areas requires a few extra containers and is a bit fragile regardless of how you code it. Part of why I'm NOT a fan of doing this type of stuff in a layout in the first place! Even so we use anchors as our outer container so they can be linked. To provide landing structures we can use H3. Note that it used to be invalid to put block level tags like H3 inside anchors, that restriction was lifted in HTML 5. No browsers EVER actually cared!

From there we place the image and let flex do its magic.

That in a nutshell is what your markup probably should have been. Now, to style it... Well, here's a working demo:

https://cutcodedown.com/for_others/soupi/flexDemo/

I'm heading to bed, but I'll try tomorrow to remember this and document the CSS so you can understand the how/what/why.

And yes, I know your endless pointless presentational classes likely came from some dipshit framework. It's why I don't like frameworks.

Laugh is, thanks to a bit of knowledge of new CSS properties like min and max, as well as the natural behavior of flex-wrap and min-width, I made it mostly responsive without any media queries. That's something new I've been playing with.

 

thank you for this, GREAT information. The look is exactly how I wanted but I have to follow these dds guidlines (https://dds.digitalservices.syr.edu/layout/flexbox). When i shrink the window the explore our collections should stack top one another.

This is the CSS I have

@font-face {
 font-family: 'orange-icons';
 src: url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.eot');
 src: url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.eot#iefix') format('embedded-opentype'),
 url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.ttf') format('truetype'),
 url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.woff') format('woff'),
 url('https://fastly.cdn.syracuse.edu/fonts/orange-icons.svg') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
 }

/* global or system rules */

:root {
 --content-width: 1200px;
}

.screen-reader-text {
 border: 0;
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: inset(50%);
 height: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute !important;
 width: 1px;
 word-wrap: normal !important; 
 /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
 background-color: #d44500;
 /* was $color__background-screen; */
 border-radius: 3px;
 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 clip: auto !important;
 clip-path: none;
 color: #ffffff;
 /* was $color__text-screen; */
 display: block;
 font-size: 8.75px;
 font-size: 0.875rem;
 font-weight: bold;
 height: auto;
 left: 5px;
 line-height: normal;
 padding: 15px 23px 14px;
 text-decoration: none;
 top: 5px;
 width: auto;
 z-index: 100000;
 /* Above WP toolbar. */
}

.sul-centered-content {
 max-width: var(--content-width, 1200);
 margin: auto;
}

.sul-menu-list {
 list-style: none;
}

.sul-menu-list > li {
 display: inline-block;
}

/* Banner specific rules */

#sul-banner {
 height: 300px;
 background-image: url("../img/birdlibrary.jpg");
 background-size: 100% auto;
 padding-top: 50px;
}

#sul-hours-content {
 margin-right: 10%;
 padding: 10px;
 min-width: 300px;
}
#sul-search-content {
 margin-left: 10%;
 padding: 10px;
}

#sul-search-button {
 display: inline-block;
}

#sul-search-quick-links ul {
 font-size: 10px;
 padding-inline-start: 0;
}

@media screen and (max-width: 1000px) {
 #sul-search-content,
 #sul-hours-content {
 margin: 10px 0;
 }
}

/* footer specific rules */

#sul-footer-content a {
 text-decoration: none;
}

#sul-footer-content a:hover,
#sul-footer-content a:focus {
 text-decoration: underline;
}

#sul-social-media a:hover span.screen-reader-text,
#sul-social-media a:focus span.screen-reader-text {
 clip: auto;
 clip-path: none;
 height: auto;
 width: auto;
 overflow: visible;
 z-index: 2;
 margin: 0;
 font-size: 90%;
 color: #fff;
 /*background-color: #0003ff;*/
 background-color: #d44500;
 padding: 6px;
 left: 50%;
 transform: translate(-50%, -125%);
 border-radius: 5px;
 line-height: 1;
}

#sul-social-media,
#sul-policies {
 list-style: none;
}

#sul-social-media {
 padding-inline-start: 0;
}

#sul-social-media li {
 display: inline-block;
}

#sul-policies-content {
 width: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
}

/* ************ DPH Additions ******** */

#sul-logo-header {
 width:400px;
}
.sul-head-li a {
 display: inline-block;
 color: white;
 text-decoration: none;
 list-style: none;
}
#sul-ul-nav li{
 display: inline;
 text-decoration: none;

}
#sul-ul-nav li a{
 color: white;
 display: inline-block;
 text-decoration: none;
 list-style: none;

}
/* ************ END DPH Additions ******** */

Code (markup):

The HTML I have is

<main class="main">

<div class='flex-container'>
    <div class='flex-grid'>
        <div class='flex-grid-item-7-md'>
                <div class='flex-row'>
                    <div class='flex-grid-item-7-md '>
    <div class='flex-grid-item'>
                           <h3 class='heading-display-h2'>Quick Links</h3>
                  <div class='flex-container padding-top-3 padding-bottom-3'>
                  <div class='flex-grid'>
                     <ul id="sul-policies" class="flex-md flex-justify-center">
                                <li class="padding-x-2">  <a href="#"><img src="{% static "img/1.JPG" %}" alt="Staff Directory"></li></a>
                                <li class="padding-x-2">  <a href="#"><img src="{% static "img/2.JPG" %}" alt="Booking"></li></a>
                                <li class="padding-x-2">  <a href="#"><img src="{% static "img/3.JPG" %}" alt="SC"></li></a>
                                <li class="padding-x-2">  <a href="4"><img src="{% static "img/4.JPG" %}" alt="Guides"></li></a>
                            </ul>
                  </div>
                  </div>
                      </div>   
                    </div>
                    <div class='flex-grid-item-5-md '>
                             <div class='flex-grid-item'>
                          <div class='padding-2 margin-2'>
                            <h2 class='heading-display-h2'>Databases</h3>
                             <div class='flex-container padding-top-3 padding-bottom-3'>
            <div class='flex-grid'>
                <div class='flex-grid-item'>
                    <div class=' padding-2'>
               <div class='display-md-inline-block display-sm-block margin heading-display-h3'><b>Starting Policies</b></div><br>
                              Ebsco<br>
                              JSTOR<br>
                              Proques<br>
                              Scopus<br>
                          </div>
                </div>
            <div class='flex-grid-item'>
            <div class=' padding-2'>
            <div class='display-md-inline-block display-sm-block margin heading-display-h3'><b>Frequently Used</b></div><br>
                              IBISWorld<br>
                              Kanopy<br>
                              PsycINFO<br>
                              New York Times<br>
                              WorldCat<br>
                          </div>
           </div>
          </div>
                         </div>
                          </div>
                      </div>
                    </div>
                </div>
        </div>
        <div class='flex-grid'>
 <!--Flex Box 2-->
                      <div class='flex-grid-item'>
                          <div class='padding-2 margin-2'>           
                           <h2 class='heading-display-h2'>Explore Collections</h3>

                    <div class='flex-container padding-top-3'>
                        <div class='flex-grid'>
                           <div class='flex-grid'>
                     <ul id="sul-policies" class="flex-md sul-ul-wrap">
                                <li class="padding-x-2 sul-img-size">  <a href="#"><img src="{% static "img/5.JPG" %}" alt="hours" style="min-width: 200px;"></li></a>
                                <li class="padding-x-2 sul-img-size">  <a href="#"><img src="{% static "img/6.JPG" %}" alt="Booking" style="min-width: 200px;"></li></a>
                                <li class="padding-x-2 sul-img-size">  <a href="#"><img src="{% static "img/7.JPG" %}" alt="SC" style="min-width: 200px;"></li></a>
                                <li class="padding-x-2 sul-img-size">  <a href="8"><img src="{% static "img/8.JPG" %}" alt="Guides" style="min-width: 200px;"></li></a>
                            </ul>
                  </div>


                        </div>
                    </div></div>
                      </div>         
        </div>
    </div>
</div>  </main>

Code (markup):

 

Sadly those "guidelines" look like bootcrap's worst. That means it's ignorant inept garbage and if that's for an educational institution, they're risking getting their arses sued off by using that garbage shit-show of presentational class idiocy.

Hence why their entire site is an accessibility shit-show; a tragic comedy when they have an "accessibility" section, despite clearly not knowing enough about HTML or CSS to flap their yap on the topic.

Anyone telling you to use garbage like that has no business telling you how to make a page on a website.

 

I understand, is there a way you can create the same flex demo using https://dds.digitalservices.syr.edu/layout/flexbox or updating my code above. The css should be good already.

 

No, because the CSS it relies on is a shit-show. The code presented in that link is a shit-show.

If that's for work, quit. If you're trying to learn from their examples, don't. If that's coursework, sue to get your tuition back. These F***nuts have NO business telling anyone how to use HTML or CSS. If this is actually for them, I would tell them to sod off.