Aligning elements on CSS Grid Layout Cards - html

I found this interesting CSS Grid Layout for Cards from a site which is as well web responsive and mobile responsive but i am trying hard to make all the buttons to be aligned on the same line on each card even if the text of each card is not the same.
Any ideas?
Below the code
<!doctype html>
<title>Example</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
}
.grid > article img {
max-width: 100%;
}
.text {
padding: 0 20px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
</style>
<main class="grid">
<article>
<img src="/pix/samples/23m.jpg" alt="Sample photo">
<div class="text">
<h3>Seamlessly visualize quality</h3>
<p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
<button>Here's why</button>
</div>
</article>
<article>
<img src="/pix/samples/24m.jpg" alt="Sample photo">
<div class="text">
<h3>Completely Synergize</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
<button>Here's how</button>
</div>
</article>
<article>
<img src="/pix/samples/22l.jpg" alt="Sample photo">
<div class="text">
<h3>Dynamically Procrastinate</h3>
<p>Completely synergize resource taxing relationships via premier niche markets.</p>
<button>Read more</button>
</div>
</article>
<article>
<img src="/pix/samples/15l.jpg" alt="Sample photo">
<div class="text">
<h3>Best in class</h3>
<p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
<button>Just do it...</button>
</div>
</article>
<article>
<img src="/pix/samples/25m.jpg" alt="Sample photo">
<div class="text">
<h3>Dynamically innovate supply chains</h3>
<p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
<button>Here's why</button>
</div>
</article>
<article>
<img src="/pix/samples/16l.jpg" alt="Sample photo">
<div class="text">
<h3>Sanity check</h3>
<p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
<button>Stop here</button>
</div>
</article>
</main>
I like how each card has the same size etc and definetely i can do a lot with some CSS transition properties like make the whole card to be full image and when you hover you can see the text on the card but out of curiosity i want to make these buttons aligned always on the bottom of the card.


Saved by the guide:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid>article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
display: flex; /* <-------------- changes */
flex-direction: column; /* <-------------- changes */
}
.grid>article img {
max-width: 100%;
}
.text {
padding: 0 20px 20px;
flex-grow: 1;
display: flex; /* <-------------- changes */
flex-direction: column; /* <-------------- changes */
}
.text>p {
flex-grow: 1; /* <-------------- changes */
}
.text>button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
<main class="grid">
<article>
<img src="https://via.placeholder.com/300x100" alt="Sample photo">
<div class="text">
<h3>Seamlessly visualize quality</h3>
<p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
<button>Here's why</button>
</div>
</article>
<article>
<img src="https://via.placeholder.com/300x100" alt="Sample photo">
<div class="text">
<h3>Completely Synergize</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
<button>Here's how</button>
</div>
</article>
<article>
<img src="https://via.placeholder.com/300x100" alt="Sample photo">
<div class="text">
<h3>Dynamically Procrastinate</h3>
<p>Completely synergize resource taxing relationships via premier niche markets.</p>
<button>Read more</button>
</div>
</article>
<article>
<img src="https://via.placeholder.com/300x100" alt="Sample photo">
<div class="text">
<h3>Best in class</h3>
<p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
<button>Just do it...</button>
</div>
</article>
<article>
<img src="https://via.placeholder.com/300x100" alt="Sample photo">
<div class="text">
<h3>Dynamically innovate supply chains</h3>
<p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
<button>Here's why</button>
</div>
</article>
<article>
<img src="https://via.placeholder.com/300x100" alt="Sample photo">
<div class="text">
<h3>Sanity check</h3>
<p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
<button>Stop here</button>
</div>
</article>
</main>
In short, both the article elements and the nested .text elements need to be flex columns with appropriate configuration.


Something like this should work...
.text {
display: grid;
height: 90%;
grid-template-rows: auto 1fr auto;
}

Related

Divs not stacking vertically when shrinking browser using flexbox

For whatever reason I can't figure this simple thing out. I've 3 divs that I want to stack when shrinking the browser using flexbox, however I must be missing something. Any insight would be appreciated. I merely want to just make these responsive & have actually done this before but maybe I am going crazy :).
.container {
position: relative;
display: grid;
justify-content: center;
align-items: center;
flex-direction: row;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: grid;
flex-direction: row;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>

Use grid-template-columns: repeat(auto-fill, 150px); to have a CSS grid layout that automatically adapts to the viewport size without needing to hardcode #media rules.
For example:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
gap: 1em;
}
.item {
margin: 3px;
padding: 10px 0 0 10px;
display: flex;
flex-direction: column;
}
.item img {
max-width: 100%;
height: auto;
}
.description {
font-family: 'Nunito', sans-serif;
color: #000;
}
<div class="container">
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="info">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
<div class="item">
<a href="#">
<img width="400" height="400" src="https://placekitten.com/400/400" />
</a>
<div class="type">
Cheetah
</div>
<div class="description">
The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
</div>
<div>
Learn more
</div>
</div>
</div>

Trying to use scroll snapping

So, i decided to use scroll snapping in the website i am creating, but for some reason, even after following 5/6 tutorials on youtube, none of them worked for me, i tried to add scroll snapping to each home div but that didn't work, so i changed 3 or 4 times this code, tried putting the snap type in container, in body, but none of that worked. (that's not the full css code, but only the important ones)
If anyone can help, i would appreciate.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
html {
scroll-snap-type: y mandatory;
overflow-y: auto;
}
.container {
position: relative;
width: 100%;
height: 100%;
}
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
.home-1 {
height: 100vh;
width: 100%;
background-color: #DBDBDB;
display: flex;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<title>Portfolio</title>
</head>
<body>
<div class="container">
<div class="home-1">
<div class="menu">
<p>Menu</p>
</div>
<div class="top-links">
About Me
Works
</div>
<div class="right-buttons">
<li onclick="toggleLanguage('English')">En</li>
<li onclick="toggleLanguage('Portuguese')">Pt</li>
</div>
<div class="logo-holder">
<div class="title-center"><img src="assets/imgs/sample-logo.png"></div>
</div>
<div class="bottom-links">
Instagram
Behance
</div>
<div class="email">
<p>alo#scarrard.co</p>
</div>
</div>
<div class="home-2">
</div>
<div class="home-3">
<div class="row">
<div class="column">
<h1>My name is <br>
Sabrina Carrard,<br>
I’m a graphic designer <br>
and passionate <br>
about creating <br>
things and animals. <br>
</h1>
<hr class="solid">
<p>Before we say goodbye, you can get in <br>
touch through my email in Portuguese, <br>
English and French (I’m learning that, <br>
so please, be kind). <br>
</p>
</div>
<div class="column-2">
<p>My formal education was in UTFPR,
where I graduated in graphic design
as well. I started to work still I was in
college, and worked with brands like
ONU, Abril, Red Balloon, Wise up,
Porcelanosa, Medianeira, SEBRAE,
Prata e Arte, Bel Pesce, Universidade
do Intercâmbio e Casa Paraíso
Ecológico. Today I like to consider
myself as a brand and editorial
designer, things I really enjoy
while I’m working on.
</p>
<p>I started to care about art when
I was in school. At the time, I was
obsessed with movies and used to
watch four or five movies a day (but
I was a fine student, I swear). After
that I fell in love with art in
my college days, especially art
history. Today I’m very interested
in the discussion between gender
and art. Female artists, what they
did and their stories, really caught me.
</p>
</div>
<div class="column-3">
<p>
Besides animals, other thing that
is really important to know is that
I’m fascinated by books and
literature. I truly believed that
literature opened my eyes to
important questions such as
human rights and feminism.
So when I’m reading something,
usually they are novels related
to these subjects because it
is something that I care about
</p>
</div>
</div>
</div>
<div class="home-4">
</div>
<div class="home-5">
</div>
<div class="home-6">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/projetopessoal/Saba/saba/imghome/imghome.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/projetopessoal/Aurora/aurora/imghome/imghome.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/projetopessoal/Tempodachuva/tempodachuva/imghome/imghome.png" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/projetopessoal/Zinebrabas/zinebrabas/imghome/SCARRARD-Portfolio_imagem home_Zine.jpg" class="gallery__img " alt="Image 4 ">
</figure>
<figure class="gallery__item gallery__item--5 ">
<img src="assets/imgs/projetopessoal/Bunker/bunker/home/imghome.png" class="gallery__img " alt="Image 5 ">
</figure>
</div>
</div>
<div class="home-7">
</div>
<div class="home-8">
</div>
<div class="home-9">
<div class="gallery">
<figure class="gallery__item gallery__item--1 ">
<img src="assets/imgs/marcasB/PrataEArte/Prata/imghome/SCARRARD-Portfolio_imagem home_Prata e arte.png" class="gallery__img " alt="Image 1 ">
</figure>
<figure class="gallery__item gallery__item--2 ">
<img src="assets/imgs/marcasB/Oliveira/oliveira/imghome/SCARRARD-Portfolio_imagem home_Oliveira.png" class="gallery__img " alt="Image 2 ">
</figure>
<figure class="gallery__item gallery__item--3 ">
<img src="assets/imgs/marcasB/Transformando/transformando/imghome/SCARRARD-Portfolio_imagem home_Tranformando.jpg" class="gallery__img " alt="Image 3 ">
</figure>
<figure class="gallery__item gallery__item--4 ">
<img src="assets/imgs/marcasB/CarinaDiniz/Carina/imghome/SCARRARD-Portfolio_imagem home_Carina Diniz.png" class="gallery__img " alt="Image 4 ">
</figure>
</div>
</div>
<div class="home-10">
</div>
</div>
</body>
</html>

Problem
The following CSS ruleset is wrong:
.body .home-1 .home-2 .home-3 .home-4 .home-5 .home-6 .home-7 .home-8 .home-9 .home-10 {
scroll-snap-align: start;
}
There's no class="body" in the HTML.
The selector only targets .home-10. When you list more than one tag, class, etc., how each part is delimited is very important:
Selector
Target
Declaration
.A {space} .B
.B
Target each .B that is a descendant of an .A
.A , .B
.A OR .B
Target all .A and all .B
.A > .B
.B
Target each .B that is a direct descendant (child) of an .A
.A + .B
.B
Target each .B that is the very next sibling of an .A
.A ~ .B
.B
Target each .B that is a sibling that proceeds an .A
.A.B
.A AND .B
Target all tags that have class="A B"
So if your intention was to target each of those classes, you need to delimit them with a comma:
.home-1, .home-2, .home-3, .home-4, .home-5, .home-6, .home-7, .home-8, .home-9, .home-10 {
scroll-snap-align: start;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght#300&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font: 2ch/1.25 Oswald;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
overflow-y: auto;
}
body {
background: #DBDBDB;
}
h1,
h2,
h3,
h4,
legend,
.byline,
.title {
font-family: Montserrat;
}
.byline {
font-style: italic;
}
header,
section,
footer {
padding: 10px 12px;
background: #DBDBDB;
scroll-snap-align: start;
}
header {
margin: 0 0 20px 0;
border-bottom: 3px inset grey;
}
section {
min-height: 100vh;
}
footer {
margin: 20px 0 0 0;
border-top: 3px inset grey;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
menu {
display: flex;
justify-content: space-around;
width: max-content;
list-style: none;
margin-left: 0;
}
.left,
.right {
display: flex;
align-items: center;
}
li {
margin: 0 5px
}
p {
margin-bottom: 5px;
}
.logo {
max-width: 3rem;
}
.logo img {
display: block;
object-fit: contain;
max-width: 3rem;
}
h1 {
margin-bottom: 10px
}
h2 {
margin-bottom: 5px
}
article {
padding: 5px 8px 8px;
flex: 1;
}
article:first-of-type {
flex: 0.5;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: flex-start;
margin: 10px;
}
.title {
margin-bottom: 0;
}
.gallery {
scroll-snap-align: none;
}
.gallery figure {
align-self: center;
margin: 10px;
scroll-snap-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/main.css" rel="stylesheet">
<title>Portfolio</title>
</head>
<body>
<header>
<h1>Sabrina Carrard</h1>
<nav>
<div class='left'>
<p class='title'>Menu</p>
<menu>
<li>About Me</li>
<li>Works</li>
</menu>
</div>
<div class='right'>
<menu>
<li><a href="#" class='en lang'>En</a></li>
<li><a href='#' class='pt lang'>Pt</a></li>
</menu>
<figure class="logo">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"></figure>
</div>
</nav>
</header>
<main>
<section class='page'>
<div class="row">
<article class='column'>
<h2>My name is <br>Sabrina Carrard, </h2>
<p class='byline'>I’m a graphic designer and passionate about creating things and animals.</p>
</article>
<article class="column">
<p>My formal education was in UTFPR, where I graduated in graphic design as well. I started to work still I was in college, and worked with brands like ONU, Abril, Red Balloon, Wise up, Porcelanosa, Medianeira, SEBRAE, Prata e Arte, Bel Pesce,
Universidade do Intercâmbio e Casa Paraíso Ecológico. Today I like to consider myself as a brand and editorial designer, things I really enjoy while I’m working on.</p>
<p>I started to care about art when I was in school. At the time, I was obsessed with movies and used to watch four or five movies a day (but I was a fine student, I swear). After that I fell in love with art in my college days, especially art
history.
</p>
</article>
<article class="column">
<p>Today I’m very interested in the discussion between gender and art. Female artists, what they did and their stories, really caught me.</p>
<p>Besides animals, other thing that is really important to know is that I’m fascinated by books and literature. I truly believed that literature opened my eyes to important questions such as human rights and feminism. So when I’m reading something,
usually they are novels related to these subjects because it is something that I care about.</p>
</article>
</div>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/people?w=320&h=180&random=1&txt=1&txtclr=fc0' alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=2&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=3&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/things?w=160&h=90&random=1&txt=4&txtclr=fc0" alt="">
</figure>
<figure>
<img src="https://placem.at/people?w=160&h=90&random=1&txt=5&txtclr=fc0" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
<section class="gallery">
<div class='row'>
<figure>
<img src='https://placem.at/things?w=480&h=270&random=1&txt=6&txtclr=fc0' alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/things?w=480&h=270&random=1&txt=7&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=720&h=405&random=1&txt=8&txtclr=fc0" alt="">
</figure>
</div>
<div class='row'>
<figure>
<img src="https://placem.at/places?w=320&h=160&random=1&txt=10&txtclr=fc0
" alt="">
</figure>
<figure>
<img src="https://placem.at/places?w=320&h=180&random=1&txt=11&txtclr=fc0
" alt="">
</figure>
</div>
</section>
<section>
<h3>Blank Section</h3>
</section>
</main>
<footer>
<p>Before we say goodbye, you can get in touch through my <a href='emailto:alo#scarrard.co'>email</a> in Portuguese, English, and French (I’m learning that, so please, be kind).</p>
<address>
Street<br/>
City, Province/State<br/>
Phone
</address>
</footer>
<script>
/*Always put script right before the </body> end tag*/
</script>
</body>
</html>

Put a text beneath an image

I am currently working on a website and what i want to do is I want four pictures in a square and I want a text underneath them.
I already managed to put the four images but once i try to put a text it goes everywhere but not underneath the images
HTML:
<section class="section-2">
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
</section>
CSS:
.section-2 {
margin: 200px 30px 30px 30px;
width:100%;
float:right;
min-height:1000px;
height:100%;
}
img {
float:left;
margin: 0px 100px 200px 150px;
width: 30%;
height: 30%;

The easiest and shortes way would be to simply align the cards in a grid. For that use display: grid;. To have 2 cards aligned horizontally you need to add: grid-template-columns: repeat(2, 1fr); you can change the number 2 with the numebr of cards you want to have aligned next to each other. To seperate the cards from each other, you can use grid-gap: with a value of the gap you want to have.
.section-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
}
.section-2 div img {
width: 100%;
}
<section class="section-2">
<div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<p>I'm a Syrian Hamster</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
<p>I like to eat watermelons</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Areno/IMAG0865.jpg">
<p>I love to burrow tunnels and caves</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Areno/IMAG0863.jpg">
<p>And I really enjoy sleeping in my self digged caves</p>
</div>
</section>

I am trying to align <img> next to each other then <h2> below then <p> and lastly <a>

I am trying to align the section area in a table format, however I can't seem yo figure it out. Any possibility of assistance with this one?
I have searched w3 for guidance and checked here as well. I searched align elements side by side.
#art1,
#art2,
#art3 {
box-sizing: border - box;
display: grid;
grid-template - columns: repeat(auto - fit, minmax(320 px, 1 fr));
text-align: center;
}
.articlePics {
width: 15e m;
border: 1 px solid black;
align-items: center;
float: left;
}
.articleHeadings {
display: grid;
}
<section>
<article id="art1">
<img src="images/ITPic.jpg" class="articlePics" alt="InformationTechnology" />
<h2 class="articleHeadings">Information Technology</h2>
<p>My overview</p>
More
</article>
<article id="art2">
<img src="images/biology.jpg" class="articlePics" alt="biology" />
<h2 class="articleHeadings">Biology</h2>
<p>My overview</p>
More
</article>
<article id="art3">
<img src="images/history.jpg" class="articlePics" alt="History" />
<h2 class="articleHeadings">History</h2>
<p>My overview</p>
More
</article>
</section>
I need to align the three images side by side, the h2 text to display below each image, p element below the h2 element and the button in the right corner of each image. I'd also like to place a border around this like the picture end result.

You can use flexbox to display 3 article in a row
#section {
display: flex;
}
#section > article {
border: 1px solid black;
}
#art1,
#art2,
#art3 {
box-sizing: border - box;
display: grid;
grid-template - columns: repeat(auto - fit, minmax(320 px, 1 fr));
text-align: center;
}
.articlePics {
width: 15e m;
border: 1 px solid black;
align-items: center;
float: left;
}
.articleHeadings {
display: grid;
}
<section id="section">
<article id="art1">
<img src="images/ITPic.jpg" class="articlePics" alt="InformationTechnology" />
<h2 class="articleHeadings">Information Technology</h2>
<p>My overview</p>
More
</article>
<article id="art2">
<img src="images/biology.jpg" class="articlePics" alt="biology" />
<h2 class="articleHeadings">Biology</h2>
<p>My overview</p>
More
</article>
<article id="art3">
<img src="images/history.jpg" class="articlePics" alt="History" />
<h2 class="articleHeadings">History</h2>
<p>My overview</p>
More
</article>
</section>

Awesome, thank you, I never thought of adding an id to the section. Much appreciated.

Applying image to grid

I have a grid layout. I'm trying to apply an image to the box on the left. It only fills 3 quarters of the box and leaves space at the bottom. Is there any way I can get the image to fill the entire div and be responsive as it should. I initially wanted to add a slideshow which was the same problem. Also, my other issue is the 4 smaller boxes. The text falls outside of the boxes when making the screen smaller. Hoping someone has positive feedback for me :)
I tried to extend the height of the image but obviously distorts the image
<!-- run local host
1) cd and drag drop file
2) type: python -m SimpleHTTPServer 8080
3) browser type: http://localhost8080
-->
<!-- to make a comment: cmd and / -->
<!-- to shift a section cmd + ] on mac or CTRL + ] on wondows -->
.grid {
display: grid;
grid-template-columns: 6fr 2fr 2fr;
grid-template-rows: 200px 200px 400px;
grid-gap: 20px;
grid-template-areas:
"one two three"
"one four five"
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
}
.grid > article img {
max-width: 100%;
}
.text {
padding: 0 20px 20px;
}
.text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}
.text > h3 > {
text-align: center;
}
<!-- wrapper start -->
<!-- header start -->
<div class="wrapper">
<div class="header">
<!-- nav bar -->
<ul class="nav-container">
<li>Home</li>
<li>About</li>
<li>Articles</li>
<li>Contact</li>
<li>Login</li>
</ul>
<!-- nav bar -->
<header id="top" class="top-image">
<h1 style="color: white">Code To Program</h1>
<p style="color: white">Web Design | SEO | Tutorials</p>
Contact Us
</header>
</div>
<!-- header finish -->
<!-- header 2 start -->
<div class="header-2">
<h2 style="color: lightslategrey; font-size: 3rem; text-align: center">Our Services</h2>
</div>
<!-- header 2 finish -->
</style>
<div class="container">
<main class="grid">
<article class="one" style="height: 420px">
<img class="imgs" src="img/pdx.jpg">
</article>
<article class="two">
<div class="text">
<h3>2 Web Design</h3>
<figure>
<img src="img/seo.png" alt="Smiley face" height="72" width="72">
</figure>
</div>
</article>
<article class="three">
<div class="text">
<h3>3 SEO</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Read more</button>
</div>
</article>
</br>
<article class="four">
<div class="text">
<h3>4 Blog</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Just do it...</button>
</div>
</article>
<article class="five">
<div class="text">
<h3>Tutoring</h3>
<p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
<button>Here's why</button>
</div>
</article>
</main>
</div>
Back to top »
<script src="accordian.js"></script>
<footer style="background-color: brown">
<p>This is the footer</p>
<p>© 2019 Desmond Dallas</p>
</footer>

You are looking for object-fit.
This will solve your problem:
.grid > article img {
height: 100%;
width: 100%;
object-fit: cover;
display: block;
}