My apologies if this is difficult to follow.
I am challenging myself to use only CSS and HTML to build this site in order to improve my skills with CSS. I have hit a road block with two rows that contain three "card" elements each. The cards are all over the place in height and I've not been able to find a solution to fix it. I have added line-height defined in px, em, and % values. I can't define the height of the card in px and still keep it responsive, so I defined it in %. Height: 100% causes the cards to overflow and stagger even when there is not enough content to justify the behavior. The bottom of the middle cards drops down and the two on the right side overlap. I have tried max-height: 100% to keep them from overflowing but that did nothing because the content doesn't require any of them to overflow on its own. I tried min-height: 100% but that gives me the same problems of height: 100%. I know I must be missing something here (and it's probably something obvious and painfully simple) but I'm at a loss as to what it is.
The current CSS is as follows :
/*Cards*/
.container {
display: grid/*| inline-grid*/
;
grid-template-columns: 33%, 33%, 33%;
grid-template-rows: 100px, 100px;
}
section .container {
background-color: transparent;
}
.card-row {
margin-top: 15px;
margin-bottom: 15px;
display: block;
line-height: 100%;
text-align: center;
/*height: 90%;*/
}
.card {
width: 27%;
border-radius: 20px 0px 20px 0px;
background-color: rgba(77, 111, 117, .3);
background-color: #96c6d9;
display: inline-block;
margin: 1em;
/*height: 33em;*/
height: 100%;
}
.card-heading {
line-height: 2em;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.card p {
padding: .7em;
}
a.card {
text-decoration: none;
color: #121212;
}
.card:hover {
border: 2px solid #f2f2f2;
box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}<section class="container m-a">
<div class="card-row">
<!--card 1-->
<a class="card" href="#Copyright">
<img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
<div class="card-heading">
<h3 class="center">Copyright, Censorship, and Plagiarism</h3>
</div>
<p class="left">
Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
first amendment rights and what you, as a publisher, should know about censorship.'
</p>
</a>
<!--card 2-->
<a class="card" href="#PubDigital">
<img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
<h3 class="center">Publishing in Digital Media</h3>
<p class="left">
A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
</p>
</a>
<!--card 3-->
<a class="card" href="#Print">
<img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
<h3 class="center">Editing & Design in Print</h3>
<p class="left">
Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
</p>
</a>
</div>
<div class="card-row">
<a class="card" href="#Business">
<img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
<h3 class="center">Business Principals of Publishing</h3>
<p class="left">
We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
the world of digital publishing. Join us and build your foundation.
</p>
</a>
<a class="card" href="#DigDesign">
<img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
<h3 class="center">Editing & Digital Design</h3>
<p class="left">
Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
the essentials that intertwine them.
</p>
</a>
<a class="card" href="#Access">
<img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
<h3 class="center">Accessibility of Information</h3>
<p class="left">
Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
</p>
</a>
</div>
</section>You have two options:
1 - the easiest is to set vertical-align:top in .card
/*Cards*/
.container {
display: grid/*| inline-grid*/
;
grid-template-columns: 33%, 33%, 33%;
grid-template-rows: 100px, 100px;
}
section .container {
background-color: transparent;
}
.card-row {
margin-top: 15px;
margin-bottom: 15px;
display: block;
line-height: 100%;
text-align: center;
/*height: 90%;*/
}
.card {
width: 27%;
border-radius: 20px 0px 20px 0px;
background-color: rgba(77, 111, 117, .3);
background-color: #96c6d9;
display: inline-block;
vertical-align: top;
margin: 1em;
/*height: 33em;*/
height: 100%;
}
.card-heading {
line-height: 2em;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.card p {
padding: .7em;
}
a.card {
text-decoration: none;
color: #121212;
}
.card:hover {
border: 2px solid #f2f2f2;
box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}<section class="container m-a">
<div class="card-row">
<!--card 1-->
<a class="card" href="#Copyright">
<img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
<div class="card-heading">
<h3 class="center">Copyright, Censorship, and Plagiarism</h3>
</div>
<p class="left">
Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
first amendment rights and what you, as a publisher, should know about censorship.'
</p>
</a>
<!--card 2-->
<a class="card" href="#PubDigital">
<img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
<div class="card-heading">
<h3 class="center">Publishing in Digital Media</h3>
</div>
<p class="left">
A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
</p>
</a>
<!--card 3-->
<a class="card" href="#Print">
<img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
<div class="card-heading">
<h3 class="center">Editing & Design in Print</h3>
</div>
<p class="left">
Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
</p>
</a>
</div>
<div class="card-row">
<a class="card" href="#Business">
<img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
<div class="card-heading">
<h3 class="center">Business Principals of Publishing</h3>
</div>
<p class="left">
We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
the world of digital publishing. Join us and build your foundation.
</p>
</a>
<a class="card" href="#DigDesign">
<img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
<h3 class="center">Editing & Digital Design</h3>
<p class="left">
Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
the essentials that intertwine them.
</p>
</a>
<a class="card" href="#Access">
<img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
<h3 class="center">Accessibility of Information</h3>
<p class="left">
Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
</p>
</a>
</div>
</section>2 - This one is replace display:inline-block with display: inline-flex; flex-direction: column;
/*Cards*/
.container {
display: grid/*| inline-grid*/
;
grid-template-columns: 33%, 33%, 33%;
grid-template-rows: 100px, 100px;
}
section .container {
background-color: transparent;
}
.card-row {
margin-top: 15px;
margin-bottom: 15px;
display: block;
line-height: 100%;
text-align: center;
/*height: 90%;*/
}
.card {
width: 27%;
border-radius: 20px 0px 20px 0px;
background-color: rgba(77, 111, 117, .3);
background-color: #96c6d9;
display: inline-flex;
flex-direction: column;
margin: 1em;
/*height: 33em;*/
height: 100%;
}
.card-heading {
line-height: 2em;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.card p {
padding: .7em;
}
a.card {
text-decoration: none;
color: #121212;
}
.card:hover {
border: 2px solid #f2f2f2;
box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}<section class="container m-a">
<div class="card-row">
<!--card 1-->
<a class="card" href="#Copyright">
<img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
<div class="card-heading">
<h3 class="center">Copyright, Censorship, and Plagiarism</h3>
</div>
<p class="left">
Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
first amendment rights and what you, as a publisher, should know about censorship.'
</p>
</a>
<!--card 2-->
<a class="card" href="#PubDigital">
<img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
<div class="card-heading">
<h3 class="center">Publishing in Digital Media</h3>
</div>
<p class="left">
A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
</p>
</a>
<!--card 3-->
<a class="card" href="#Print">
<img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
<div class="card-heading">
<h3 class="center">Editing & Design in Print</h3>
</div>
<p class="left">
Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
</p>
</a>
</div>
<div class="card-row">
<a class="card" href="#Business">
<img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
<div class="card-heading">
<h3 class="center">Business Principals of Publishing</h3>
</div>
<p class="left">
We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
the world of digital publishing. Join us and build your foundation.
</p>
</a>
<a class="card" href="#DigDesign">
<img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
<h3 class="center">Editing & Digital Design</h3>
<p class="left">
Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
the essentials that intertwine them.
</p>
</a>
<a class="card" href="#Access">
<img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
<h3 class="center">Accessibility of Information</h3>
<p class="left">
Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
</p>
</a>
</div>
</section>Also your code can be improved by using css flexbox instead of css grid, with that you'll have less HTML & CSS code
body {
margin: 0
}
/*Cards*/
.container {
display: flex;
flex-wrap: wrap;
background-color: transparent;
}
.card {
box-sizing: border-box;
width: calc((100%/3) - 2em);
border-radius: 20px 0 20px;
background-color: #96c6d9;
margin: 1em;
text-decoration: none;
color: #121212;
}
.card:hover {
border: 2px solid #f2f2f2;
box-shadow: 13px 13px 7px 0px rgba(217, 121, 121, 1);
}
.card-heading {
line-height: 2em;
text-align: center;
font-weight: 700;
}
.card p {
padding: .7em;
}<section class="container m-a">
<!--card 1-->
<a class="card" href="#Copyright">
<img src="images/copyright.jpg" class="fluid img-half-corner" alt="typewriter" />
<div class="card-heading">
<h3 class="center">Copyright, Censorship, and Plagiarism</h3>
</div>
<p class="left">
Learn about the "work for hire" doctrine's meaning for defining authors and owners. Understand the difference between Plagiarism and Copyright infringement as well as the potential ramifications of both. Dive into how schools and courts subvert student's
first amendment rights and what you, as a publisher, should know about censorship.'
</p>
</a>
<!--card 2-->
<a class="card" href="#PubDigital">
<img src="images/digitalMedia.jpg" class="fluid img-half-corner" alt="E-reader" />
<div class="card-heading">
<h3 class="center">Publishing in Digital Media</h3>
</div>
<p class="left">
A definition of digital media and digital media publishing. We will also review the basic concepts of digital media and discuss multiple platforms that exist for the publication of digital media. We will cover a wide list from the most well known and
essential to the obscure and frivolous and discuss the important aspects of each. Learn inherent difficulties associated with digital publishing and how handle them.
</p>
</a>
<!--card 3-->
<a class="card" href="#Print">
<img src="images/printDesign (1).jpg" class="fluid img-half-corner" alt="color shades" />
<div class="card-heading">
<h3 class="center">Editing & Design in Print</h3>
</div>
<p class="left">
Expect coverage of tools available to help you design the layouts and color schemes for a beautiful piece of print. Graphic designs specific to print: We will cover a variety of layouts that will make your publication stand out. Professional editors are
a necessity if you want professional quality. We'll discuss what to look for to ensure you get the editor you need.
</p>
</a>
<a class="card" href="#Business">
<img src="images/principals.jpg" class="fluid img-half-corner" alt="typewriter" />
<div class="card-heading">
<h3 class="center">Business Principals of Publishing</h3>
</div>
<p class="left">
We will discuss the best practice guidelines of ethics in publishing. Discuss the increasing ease of data manipulation and the difficulty in tracing accurate origins and copies. Decades of experience in print publishing likely did not prepare you for
the world of digital publishing. Join us and build your foundation.
</p>
</a>
<a class="card" href="#DigDesign">
<img src="images/digintaDesign.jpg" class="fluid img-half-corner" alt="E-reader" />
<h3 class="center">Editing & Digital Design</h3>
</div>
<p class="left">
Cultivate your abilities to shape a story by increasing your skills in digital film editing. Learn how to edit on the go and stay productive even when you are forced to travel without your preferred software. Learn the distinctions of each as well as
the essentials that intertwine them.
</p>
</a>
<a class="card" href="#Access">
<img src="images/accessabilityOfInfo.jpg" class="fluid img-half-corner" alt="color shades" />
<div class="card-heading">
<h3 class="center">Accessibility of Information</h3>
</div>
<p class="left">
Learn our process for ensuring that all users and learners are easily able to consume our content. Persons with disabilities have different needs for their communication technologies. Let's learn about them. This is an interactive lab that will teach
you the basics of creating accessible web content as defined by the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD).
</p>
</a>
</section>