I am trying to resize first column in grid searched on google but couldnt find the solution.
I can do it with css but want to learn how to resize repeated columns in grid.
I want first card to be width: 50%; and other two cards width:25%; and width:25%;
Here is my codes
.slider-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
margin-bottom: 40px;
}
.slider-cards img {
width: 100%;
margin-bottom: 20px;
}
.slider-cards h3 {
margin-bottom: 5px;
}
.slider-cards a {
display: inline-block;
padding-top: 10px;
color: #0067b8;
text-transform: uppercase;
font-weight: bold;
}
.slider-cards a:hover i {
margin-left: 10px;
}
<div class="slider-cards">
<div class="first">
<img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
<h3>The Conversation has reported</h3>
<p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
<div class="second">
<img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
<h3>The Conversation has reported</h3>
<p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
<div class="third">
<img src="https://i.ibb.co/LZPVKq9/card1.png" alt="">
<h3>The Conversation has reported</h3>
<p>
COVID-19 has had a deeply unequal impact on UK society, affecting some communities substantially more than others.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</div>
:
Related
I'm new to CSS and HTML. I made 3 boxes next to each other and I want to have 2 more rows of 3 boxes per row. I can't seem to understand how to separate the rows. They always end up on the same row, distorted and I've been trying all morning to fix it. I will appreciate your help, thank you!
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 400px;
height: 240px;
background-color: #ccc;
margin: 10px;
transition: all 0.3s ease-in-out;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
text-align: justify;
position: relative;
}
.box:hover {
transform: scale(1.1);
}
.box .content {
font-size: 10px;
padding: 20px;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.box .title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
position: justify;
top: 50%;
left: 50%;
}
.box:nth-child(1) {
background-color: #fec10d;
}
.box:nth-child(2) {
background-color: #0077c0;
}
.box:nth-child(3) {
background-color: #b2d234;
}
.box img {
position: relative;
top: 1%;
left: 50%;
transform: translateX(-175%);
height: 80px;
width: 80px;
object-fit: contain;
margin-bottom: 5px;
padding-bottom: 5px;
margin: auto;
display: block;
}
<div class="container">
<div class="box">
<div class="content">
<img src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD" alt="Care">
<div class="title">TEAMWORK</div>
<div>Actively seeks opportunities to collaborate with and support others. Builds relationships across the organization, shares knowledge and experience, involve others and communicates effectively.</div>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD" alt="Care">
<div class="title">BUILDS TRUST</div>
<div>Gains the trust of others through honesty and authenticity. Shows consistency between his/her words and actions, upholds professional codes of conduct, acts in accordance with the company’s policies, delivers on promises, and takes personal responsibility
for decisions, actions, and mistakes.</div>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD" alt="Care">
<div class="title">CARE FOR OTHERS AND INCLUSION</div>
<div>Actively seeks opportunities to collaborate with and support others. Builds relationships across the organization, shares knowledge and experience, involve others and communicates effectively.</div>
</div>
</div>
</div>
Please use the below code.
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
.box {
background-color: #ccc;
transition: all 0.3s ease-in-out;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
text-align: justify;
flex-basis: calc(32% - 6.67px); /* calculate flex-basis to account for gap */
margin-bottom: 20px;
}
.box:hover {
transform: scale(1.1);
}
.box .content {
font-size: 10px;
padding: 20px;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.box .title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.box:nth-child(1) {
background-color: #fec10d;
}
.box:nth-child(2) {
background-color: #0077c0;
}
.box:nth-child(3) {
background-color: #b2d234;
}
.box img {
position: relative;
height: 80px;
width: 80px;
object-fit: contain;
margin-bottom: 5px;
padding-bottom: 5px;
}
below code:
<div class="container">
<div class="box">
<div class="content">
<img src="https://img.freepik.com/free-vector/team-work-linear-design_1284-35744.jpg?w=1480&t=st=1676633574~exp=1676634174~hmac=17f549203c31724f00ab9d71befd333b53daa983a4f6974cbdb1ec4dbc3c3ad5" alt="Care">
<div class="title">TEAMWORK</div>
<div>Actively seeks opportunities to collaborate with and support others. Builds relationships across the organization, shares knowledge and experience, involve others and communicates effectively.</div>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://img.freepik.com/free-vector/team-work-linear-design_1284-35744.jpg?w=1480&t=st=1676633574~exp=1676634174~hmac=17f549203c31724f00ab9d71befd333b53daa983a4f6974cbdb1ec4dbc3c3ad5" alt="Care">
<div class="title">BUILDS TRUST</div>
<div>Gains the trust of others through honesty and authenticity. Shows consistency between his/her words and actions, upholds professional codes of conduct, acts in accordance with the company’s policies, delivers on promises, and takes personal responsibility
for decisions, actions, and mistakes.</div>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://img.freepik.com/free-vector/team-work-linear-design_1284-35744.jpg?w=1480&t=st=1676633574~exp=1676634174~hmac=17f549203c31724f00ab9d71befd333b53daa983a4f6974cbdb1ec4dbc3c3ad5" alt="Care">
<div class="title">CARE FOR OTHERS AND INCLUSION</div>
<div>Actively seeks opportunities to collaborate with and support others. Builds relationships across the organization, shares knowledge and experience, involve others and communicates effectively.</div>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://img.freepik.com/free-vector/team-work-linear-design_1284-35744.jpg?w=1480&t=st=1676633574~exp=1676634174~hmac=17f549203c31724f00ab9d71befd333b53daa983a4f6974cbdb1ec4dbc3c3ad5" alt="Care">
<div class="title">TEAMWORK</div>
<div>Actively seeks opportunities to collaborate with and support others. Builds relationships across the organization, shares knowledge and experience, involve others and communicates effectively.</div>
</div>
</div>
<div class="box">
<div class="content">
<img src="https://img.freepik.com/free-vector/team-work-linear-design_1284-35744.jpg?w=1480&t=st=1676633574~exp=1676634174~hmac=17f549203c31724f00ab9d71befd333b53daa983a4f6974cbdb1ec4dbc3c3ad5" alt="Care">
<div class="title">TEAMWORK</div>
<div>Actively seeks opportunities to collaborate with and support others. Builds relationships across the organization, shares knowledge and experience, involve others and communicates effectively.</div>
</div>
</div>
</div>
Apply these changes to resolve this issue :
.container {
display: flex;
justify-content: center;
}
/* add this style */
.boxes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
<div class="container">
<div class="boxes">
<div class="box">
<div class="content">
<img
src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD"
alt="Care"
/>
<div class="title">TEAMWORK</div>
<div>
Actively seeks opportunities to collaborate with and support
others. Builds relationships across the organization, shares
knowledge and experience, involve others and communicates
effectively.
</div>
</div>
</div>
<div class="box">
<div class="content">
<img
src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD"
alt="Care"
/>
<div class="title">BUILDS TRUST</div>
<div>
Gains the trust of others through honesty and authenticity. Shows
consistency between his/her words and actions, upholds
professional codes of conduct, acts in accordance with the
company’s policies, delivers on promises, and takes personal
responsibility for decisions, actions, and mistakes.
</div>
</div>
</div>
<div class="box">
<div class="content">
<img
src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD"
alt="Care"
/>
<div class="title">CARE FOR OTHERS AND INCLUSION</div>
<div>
Actively seeks opportunities to collaborate with and support
others. Builds relationships across the organization, shares
knowledge and experience, involve others and communicates
effectively.
</div>
</div>
</div>
<div class="box">
<div class="content">
<img
src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD"
alt="Care"
/>
<div class="title">TEAMWORK</div>
<div>
Actively seeks opportunities to collaborate with and support
others. Builds relationships across the organization, shares
knowledge and experience, involve others and communicates
effectively.
</div>
</div>
</div>
<div class="box">
<div class="content">
<img
src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD"
alt="Care"
/>
<div class="title">BUILDS TRUST</div>
<div>
Gains the trust of others through honesty and authenticity. Shows
consistency between his/her words and actions, upholds
professional codes of conduct, acts in accordance with the
company’s policies, delivers on promises, and takes personal
responsibility for decisions, actions, and mistakes.
</div>
</div>
</div>
<div class="box">
<div class="content">
<img
src="https://printeconline.sharepoint.com/:i:/r/sites/Marketing/Group%20Marketing%20Folder/Brand/Brand%20Materials/Values/Icons/Icons/Printec_Values_Icons_White_500x500px/Printec_Care_Icon_White_500x500px.png?csf=1&web=1&e=paSbKD"
alt="Care"
/>
<div class="title">CARE FOR OTHERS AND INCLUSION</div>
<div>
Actively seeks opportunities to collaborate with and support
others. Builds relationships across the organization, shares
knowledge and experience, involve others and communicates
effectively.
</div>
</div>
</div>
</div>
https://learncssgrid.com/
I am trying to create a simple grid block with minimal css but it causes cls problem, The tags that are causing cumulative layout shift: h3, img, div, p, almost all of the block.
I tried to add more css to that tags but couldn't find a way to solve it.
First div is larger than other two divs and last two divs has same size
My codes are as follows:
.grid-section {
display: grid;
grid-template-columns: repeat(3, 48% 25% 25%);
grid-gap: 1%;
margin-bottom: 40px;
}
.grid-section img {
width: 100%;
margin-bottom: 20px;
}
.grid-section h3 {
margin-bottom: 5px;
}
.grid-section a {
display: inline-block;
padding-top: 10px;
color: #0067b8;
text-transform: uppercase;
font-weight: bold;
}
.grid-section a:hover i {
margin-left: 10px;
}
#media(max-width: 768px) {
.grid-section {
grid-template-columns: repeat(2, 1fr);
}
.grid-section :first-child {
grid-column: 1 / -1;
}
}
#media(max-width: 500px) {
.grid-section {
grid-template-columns: 1fr;
}
}
<section class="grid-section">
<div>
<img src="bvvvvvvvvvv/1.webp" class="img-fluid" alt="" width="100%" height="100%" />
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select
extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
<div>
<img src="bvvvvvvvvvv/1.webp" class="img-fluid" alt="" width="100%" height="100%" />
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select
extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
<div>
<img src="bvvvvvvvvvv/2.webp" class="img-fluid" alt="" width="100%" height="100%" />
<h3>The new Microsoft Edge</h3>
<p>
Expect more. World class performance, with more privacy, more
productivity, and more value.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</section>
Any help will be appreciated. Thanks
ok with your demo, I better see what you are looking for.
simplest solution would be to use background image for the div which contain the image and the text. This solution already needs more structure in your html, but if you want to go with "img" tag, html structure will be at least 2 times more complex.
look at the snippet and try it in mobile view.
.grid-section {
display: grid;
grid-template-columns: repeat(3, 48% 25% 25%);
grid-gap: 1%;
margin-bottom: 40px;
}
.grid-section>div {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
}
.grid-section .content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1em;
margin: 1em;
background-color: rgba(255, 255, 255, 0.5);
}
.grid-section h3 {}
.grid-section a {
display: inline-block;
padding-top: 10px;
color: #0067b8;
text-transform: uppercase;
font-weight: bold;
}
.grid-section a:hover i {
margin-left: 10px;
}
#media (max-width: 768px) {
.grid-section {
grid-template-columns: repeat(2, 1fr);
}
.grid-section :first-child {
grid-column: 1 / -1;
}
}
#media (max-width: 500px) {
.grid-section {
grid-template-columns: 1fr;
}
}
<section class="grid-section">
<div style="background-image: url('https://picsum.photos/id/20/800/600')">
<div class="content">
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</div>
<div style="background-image: url('https://picsum.photos/id/32/800/600')">
<div class="content">
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</div>
<div style="background-image: url('https://picsum.photos/id/43/800/600')">
<div class="content">
<h3>The new Microsoft Edge</h3>
<p>
Expect more. World class performance, with more privacy, more productivity, and more value.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</div>
</section>
I'm trying to get my image placed next to the text on the right for each grid but whenever I place the images they get pushed under the text. I think it's probably better to do it with flexbox but I already have the grid working as I intended it if anyone can help me with this it would be much appreciated.
.grid-rules {
display: grid;
grid-auto-rows: 116px;
grid-gap: 4px 51px;
grid-template-areas: "left right";
grid-template-columns: auto auto;
margin: 27px 14px;
}
.item {
color: #333333;
font-size: 10pt;
font-family: ArialRegular;
}
#rule-title {
color: #01539C;
font-size: 12pt;
font-family: BurbankSmallBold;
}
hr {
position: relative;
border-top: 2px solid #FFBC3A;
width: 647px;
top: -35px; border-top: 2px solid #FFBC3A;
width: 647px;
}
<div class="grid-rules">
<div class="item"><div id="rule-title">Respect other penguins</div>CP does not tolerate any swearing, bullying or
mean behavior toward other penguins. Disciplinary
action will be taken should any one of these occur while
playing.
</div>
<div class="item"><div id="rule-title">No inappropriate talk</div>References to drugs and alcohol related activities,
and sexual, racial or otherwise inappropriate talk
are not permitted.
</div>
<div class="item"><div id="rule-title">Never reveal personal information</div>The best way to stay safe online is to NEVER share
your real name, phone number, address, email or
passwords.<img id="rule-image" src="images/personal.png">
</div>
<div class="item"><div id="rule-title">No cheating</div>Use of third party programs to cheat is prohibited.
Players who use any third party programs while
playing risk being permanently banned.
</div>
</div>
<hr>
<button class="btn">Continue</button>
Here is an example of what I'm trying to do https://i.imgur.com/DMlyTD4.png
First I would recommend changing your markup so that the title and content are grouped together inside a <div>, separate from the image. See example below.
Then you could either use display: flex; or display: grid; on the .item class to align the content (name and description) and image next to each other.
.grid-rules {
display: grid;
grid-auto-rows: 116px;
grid-gap: 4px 51px;
grid-template-areas: "left right";
grid-template-columns: auto auto;
margin: 27px 14px;
}
.item {
color: #333333;
font-size: 10pt;
font-family: ArialRegular;
/*New stuff*/
display: flex;
/*or use grid*/
/*display: grid;
grid-template-columns: repeat(2, 2fr);
*/
}
#rule-title {
color: #01539C;
font-size: 12pt;
font-family: BurbankSmallBold;
}
hr {
position: relative;
border-top: 2px solid #FFBC3A;
width: 647px;
top: -35px;
border-top: 2px solid #FFBC3A;
width: 647px;
}
<div class="grid-rules">
<div class="item">
<div>
<div id="rule-title">Respect other penguins</div>CP does not tolerate any swearing, bullying or mean behavior toward other penguins. Disciplinary action will be taken should any one of these occur while playing.
</div>
</div>
<div class="item">
<div>
<div id="rule-title">No inappropriate talk</div>References to drugs and alcohol related activities, and sexual, racial or otherwise inappropriate talk are not permitted.
</div>
</div>
<div class="item">
<div>
<div id="rule-title">Never reveal personal information</div>The best way to stay safe online is to NEVER share your real name, phone number, address, email or passwords.
</div>
<img id="rule-image" src="images/personal.png">
</div>
<div class="item">
<div>
<div id="rule-title">No cheating</div>Use of third party programs to cheat is prohibited. Players who use any third party programs while playing risk being permanently banned.
</div>
</div>
</div>
I am trying to align my 3 service divs next to each other but instead they are each slightly lower than the other one. I think it might be the images that are making so they do not align. I have tried the following without success:
.col-md-4 {
float:left;
}
Please advise what I am doing wrong and how I can align my divs, my code is as follows:
HTML
<section id="services">
<div class="container text-center">
<h1 CLASS="title">WHAT WE OFFER</h1>
<div class="row text-center">
<div class="col-md-4 services">
<img src="images/service1.png" class="service-img">
<h4>TITLE 1</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
<div class="col-md-4 services">
<img src="images/service2.jpg" class="service-img">
<h4>TITLE 2</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
<div class="col-md-4 services">
<img src="images/service3.png" class="service-img">
<h4>TITLE 3</h4>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
<button type="button"class="btn btn-primary"> All Services</button>
</div>
</section>
CSS
#services
{
padding: 80px 0;
}
.service-img
{
width: 100px;
margin-top: 20px;
}
.services
{
padding: 20px; /*service images and paragraphs do not want to align*/
}
.services h4
{
padding: 5px;
margin-top: 25px;
text-transform: uppercase;
}
.title::before
{
content: '';
background: #7b1798;
height:5px;
width: 300px;
margin-left: auto;
margin-right: auto;
display: block;
transform: translateY(63px);
}
#services .btn-primary
{
box-shadow: none;
padding: 8px 25px;
border: none;
border-radius: 20px;
background-image: linear-gradient(to right,#a517ba,#5f1782);
Instead of using the default flow layout, the flexbox layout can help you in this situation. CSS Tricks have a great guide about it here.
Applying display: flex to the parent div .row would render its children divs .services in the flexbox layout. Further, applying the CSS declaration align-items: center; should horizontally align its children elements .services in a single line.
The full CSS rule could be:
.row {
display: flex;
align-items: center;
}
I am trying to put similar groups of elements in a grid:
#grid {
position: absolute;
left: 135px;
top: 158px;
width: 1080px;
height: 1035px;
display: grid;
grid-template-rows: 99px 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 60px;
grid-column-gap: 60px;
grid-template-areas: "headings headings headings"
"content-a content-b content-c"
"content-d content-e content-f";
}
#welcome-heading {
padding-bottom: 10px;
}
#introduction-heading {
padding-bottom: 10px;
}
#headings-section {
grid-area: headings;
}
#content-a {
grid-area: content-a;
}
#content-b {
grid-area: content-b;
}
#content-c {
grid-area: content-c;
}
#content-d {
grid-area: content-d;
}
#content-e {
grid-area: content-e;
}
#content-f {
grid-area: content-f;
}
#content {
text-align: center;
}
#content img {
margin-bottom: 33px;
width: 320px;
height: 240px;
}
#content h4 {
margin-bottom: 20px;
}
.content-title-anchor {
font-size: 18px;
line-height: 18px;
color: #333333;
}
.button {
font-size: 16px;
line-height: 27px;
color: #FFFFFF;
background-color: #FF5A43;
padding: 10px 25px;
border-radius: 4px;
}
<div id="grid">
<section id="headings-section">
<h1 id="welcome-heading">Welcome to Icon Utopia!</h1>
<h3 id="introduction-heading">Everything about iconography and building your career as a designer.</h3>
<p>👇Wondering where to start?👇</p>
</section>
<section id="content">
<div id="content-a">
<img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following.">
<a class="content-title-anchor" href="build-your-dribbble-audience.html">Build Your Dribbble Audience</a>
<h4>A Comprehensive Guide to Building your Dribbble following.</h4>
<a class="button" href="build-your-dribbble-audience.html">Get a FREE Chapter!</a>
</div>
<div id="content-b">
<img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN">
<a class="content-title-anchor" href="free-icon-design-guide.html">Free Icon Design Guide</a>
<h4>Everything you need to know about icon design to get started.</h4>
<a class="button" href="free-icon-design-guide.html">Learn Icon Design</a>
</div>
<div id="content-c">
<img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS">
<a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Pixel Perfect Course</a>
<h4>Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!</h4>
<a class="button" href="crafting-pixel-perfect-icons-the-right-way.html">Check out the Course</a>
</div>
<div id="content-d">
<img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET">
<a class="content-title-anchor" href="https://gumroad.com/l/ojcK">Space Noise Brushes</a>
<h4>Procreate brushes that give your drawings fantastic textures</h4>
<a class="button" href="https://gumroad.com/l/ojcK">Get Noise Brushes</a>
</div>
<div id="content-e">
<img src="index/free-icons.jpg" alt="FREE ICONS">
<a class="content-title-anchor" href="https://iconutopia.com/free-icons/">Free Icons</a>
<h4>Best FREE vector icons and icon sets for personal and commercial use</h4>
<a class="button" href="https://iconutopia.com/free-icons/">Get Free Icons</a>
</div>
<div id="content-f">
<img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA">
<a class="content-title-anchor" href="blog.html">Icon Utopia Blog</a>
<h4>Blog about making a steady income and building a career as an icon designer.</h4>
<a class="button" href="blog.html">Check out the Blog</a>
</div>
</section>
</div>
But this is the result that I get:
As you can see, the layout is correct for the first row. But the bottom 2 rows should each have 3 columns. Instead, I get 6 rows with one column. I've read this and I think it might have something to do with me nesting the element of each area within a div, but I'm not sure. I can't figure out what I'm supposed to do to get each of the div placed in one 'area' in a grid whose bottom 2 rows have 3 columns each.
Since your content-* elements are not direct children, they are not affected by the #grid parent. You can make your #content element a grid parent.
I changed the grid-template-areas for your #grid element and update the CSS to include styles for the #content element (which you may need to update for your needs)
#grid {
position: absolute;
left: 135px;
top: 158px;
width: 1080px;
height: 1035px;
display: grid;
grid-template-rows: 99px 1fr;
grid-template-columns: 1fr;
grid-row-gap: 60px;
grid-template-areas: "headings" "content"
}
#content {
display: grid;
width: 100%;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 60px;
grid-column-gap: 60px;
grid-template-areas: "content-a content-b content-c" "content-d content-e content-f";
grid-area: content;
}
#welcome-heading {
padding-bottom: 10px;
}
#introduction-heading {
padding-bottom: 10px;
}
#headings-section {
grid-area: headings;
}
#content-a {
grid-area: content-a;
}
#content-b {
grid-area: content-b;
}
#content-c {
grid-area: content-c;
}
#content-d {
grid-area: content-d;
}
#content-e {
grid-area: content-e;
}
#content-f {
grid-area: content-f;
}
#content {
text-align: center;
}
#content img {
margin-bottom: 33px;
width: 320px;
height: 240px;
}
#content h4 {
margin-bottom: 20px;
}
.content-title-anchor {
font-size: 18px;
line-height: 18px;
color: #333333;
}
.button {
font-size: 16px;
line-height: 27px;
color: #FFFFFF;
background-color: #FF5A43;
padding: 10px 25px;
border-radius: 4px;
}
<div id="grid">
<section id="headings-section">
<h1 id="welcome-heading">Welcome to Icon Utopia!</h1>
<h3 id="introduction-heading">Everything about iconography and building your career as a designer.</h3>
<p>👇Wondering where to start?👇</p>
</section>
<section id="content">
<div id="content-a">
<img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following.">
<a class="content-title-anchor" href="build-your-dribbble-audience.html">Build Your Dribbble Audience</a>
<h4>A Comprehensive Guide to Building your Dribbble following.</h4>
<a class="button" href="build-your-dribbble-audience.html">Get a FREE Chapter!</a>
</div>
<div id="content-b">
<img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN">
<a class="content-title-anchor" href="free-icon-design-guide.html">Free Icon Design Guide</a>
<h4>Everything you need to know about icon design to get started.</h4>
<a class="button" href="free-icon-design-guide.html">Learn Icon Design</a>
</div>
<div id="content-c">
<img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS">
<a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Pixel Perfect Course</a>
<h4>Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!</h4>
<a class="button" href="crafting-pixel-perfect-icons-the-right-way.html">Check out the Course</a>
</div>
<div id="content-d">
<img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET">
<a class="content-title-anchor" href="https://gumroad.com/l/ojcK">Space Noise Brushes</a>
<h4>Procreate brushes that give your drawings fantastic textures</h4>
<a class="button" href="https://gumroad.com/l/ojcK">Get Noise Brushes</a>
</div>
<div id="content-e">
<img src="index/free-icons.jpg" alt="FREE ICONS">
<a class="content-title-anchor" href="https://iconutopia.com/free-icons/">Free Icons</a>
<h4>Best FREE vector icons and icon sets for personal and commercial use</h4>
<a class="button" href="https://iconutopia.com/free-icons/">Get Free Icons</a>
</div>
<div id="content-f">
<img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA">
<a class="content-title-anchor" href="blog.html">Icon Utopia Blog</a>
<h4>Blog about making a steady income and building a career as an icon designer.</h4>
<a class="button" href="blog.html">Check out the Blog</a>
</div>
</section>
</div>
You can technically remove the grid display from #grid since you don't necessarily need it, since your #headings-section is full-width anyway.
#grid {
position: absolute;
left: 135px;
top: 158px;
width: 1080px;
height: 1035px;
}
#content {
display: grid;
width: 100%;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 60px;
grid-column-gap: 60px;
grid-template-areas: "content-a content-b content-c" "content-d content-e content-f";
}
#welcome-heading {
padding-bottom: 10px;
}
#introduction-heading {
padding-bottom: 10px;
}
#headings-section {
grid-area: headings;
}
#content-a {
grid-area: content-a;
}
#content-b {
grid-area: content-b;
}
#content-c {
grid-area: content-c;
}
#content-d {
grid-area: content-d;
}
#content-e {
grid-area: content-e;
}
#content-f {
grid-area: content-f;
}
#content {
text-align: center;
}
#content img {
margin-bottom: 33px;
width: 320px;
height: 240px;
}
#content h4 {
margin-bottom: 20px;
}
.content-title-anchor {
font-size: 18px;
line-height: 18px;
color: #333333;
}
.button {
font-size: 16px;
line-height: 27px;
color: #FFFFFF;
background-color: #FF5A43;
padding: 10px 25px;
border-radius: 4px;
}
<div id="grid">
<section id="headings-section">
<h1 id="welcome-heading">Welcome to Icon Utopia!</h1>
<h3 id="introduction-heading">Everything about iconography and building your career as a designer.</h3>
<p>👇Wondering where to start?👇</p>
</section>
<section id="content">
<div id="content-a">
<img src="index/landing-page.jpg" alt="Guide to: Building your dribbble following.">
<a class="content-title-anchor" href="build-your-dribbble-audience.html">Build Your Dribbble Audience</a>
<h4>A Comprehensive Guide to Building your Dribbble following.</h4>
<a class="button" href="build-your-dribbble-audience.html">Get a FREE Chapter!</a>
</div>
<div id="content-b">
<img src="index/icon-design-guide2-1.jpg" alt="LEARN ICON DESIGN">
<a class="content-title-anchor" href="free-icon-design-guide.html">Free Icon Design Guide</a>
<h4>Everything you need to know about icon design to get started.</h4>
<a class="button" href="free-icon-design-guide.html">Learn Icon Design</a>
</div>
<div id="content-c">
<img src="index/pixel-perfect-icons.jpg" alt="CRAFTING PIXEL PERFECT ICONS">
<a class="content-title-anchor" href="crafting-pixel-perfect-icons-the-right-way.html">Pixel Perfect Course</a>
<h4>Crafting Pixel Perfect Icons The Right Way - learn to create sharp-looking icons!</h4>
<a class="button" href="crafting-pixel-perfect-icons-the-right-way.html">Check out the Course</a>
</div>
<div id="content-d">
<img src="index/space-noise-brushes.jpg" alt="SPACE NOISE: PROCREATE BRUSH SET">
<a class="content-title-anchor" href="https://gumroad.com/l/ojcK">Space Noise Brushes</a>
<h4>Procreate brushes that give your drawings fantastic textures</h4>
<a class="button" href="https://gumroad.com/l/ojcK">Get Noise Brushes</a>
</div>
<div id="content-e">
<img src="index/free-icons.jpg" alt="FREE ICONS">
<a class="content-title-anchor" href="https://iconutopia.com/free-icons/">Free Icons</a>
<h4>Best FREE vector icons and icon sets for personal and commercial use</h4>
<a class="button" href="https://iconutopia.com/free-icons/">Get Free Icons</a>
</div>
<div id="content-f">
<img src="index/icon-utopia-blog-2.jpg" alt="MY BLOG: ICON UTOPIA">
<a class="content-title-anchor" href="blog.html">Icon Utopia Blog</a>
<h4>Blog about making a steady income and building a career as an icon designer.</h4>
<a class="button" href="blog.html">Check out the Blog</a>
</div>
</section>
</div>