Issue
I have a code where I am trying to display all the child elements of the card-container
element, which is each card
, into the same row unless there is not enough space. The code is as follows:
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
text-transform: capitalize;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
}
.heading {
text-align: center;
font-size: 2.25em;
padding: 1.25em 0;
/* y-padding = 0.3em */
color: #00cc99;
}
.card-container {
display: grid;
/*repeat(auto-fit, minmax(10em, 1fr));*/
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
column-gap: 15px;
padding: 20px;
}
.card-container .card {
/* grid-row: 1; */
/* width:%; */
padding: 0.6em;
border: 0.15em solid #00cc99;
border-radius: 10px;
text-align: center;
background-color: white;
box-shadow: 5px 5px #00cc99;
}
.card-container .card .card-icon {
margin-top: 10px;
}
.card-container .card .card-icon i {
margin: 10px 0;
font-size: 1.5em;
color: #00cc99;
}
.card-container .card .card-title {
color: #00cc99;
font-size: 1.125em;
margin-top: 3px;
}
.card-container .card p {
font-size: 0.8em;
color: #555;
padding: 10px;
}
.card-container .card a {
color: #00cc99;
text-decoration: none;
display: block;
font-size: 1.125em;
;
padding: 10px, 0px;
}
.card-container .card a:hover {
color: #8d4cd6;
}
<!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">
<title>Services</title>
<script src="https://kit.fontawesome.com/364bf5035f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Services</h1>
<div class="card-container">
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-code"></i>
</div>
<h3 class="card-title">web development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
<br><br>
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-tools"></i>
</div>
<h3 class="card-title">web design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
<br><br>
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-brush"></i>
</div>
<h3 class="card-title">Animation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
<br><br>
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-bullhorn"></i>
</div>
<h3 class="card-title">digital marketing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</body>
</html>
I have tried setting the grid-template-rows: 1fr;
and setting the grid-row:1;
. The first one doesn't make any change and the latter creates an overflow on decreasing the window/screen size.
I have also tried using repeat(auto-fit, minmax(10em, 1fr));
but that only seems to reduce the width and no other change.
Solution
As I commented :
You should remove those
<br><br>
all alone in between cards , there are themselves filling a cell of the grid.
Then your grid style should be what you expect.
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
text-transform: capitalize;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
}
.heading {
text-align: center;
font-size: 2.25em;
padding: 1.25em 0;
/* y-padding = 0.3em */
color: #00cc99;
}
.card-container {
display: grid;
/*repeat(auto-fit, minmax(10em, 1fr));*/
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
column-gap: 15px;
padding: 20px;
}
.card-container .card {
/* grid-row: 1; */
/* width:%; */
padding: 0.6em;
border: 0.15em solid #00cc99;
border-radius: 10px;
text-align: center;
background-color: white;
box-shadow: 5px 5px #00cc99;
}
.card-container .card .card-icon {
margin-top: 10px;
}
.card-container .card .card-icon i {
margin: 10px 0;
font-size: 1.5em;
color: #00cc99;
}
.card-container .card .card-title {
color: #00cc99;
font-size: 1.125em;
margin-top: 3px;
}
.card-container .card p {
font-size: 0.8em;
color: #555;
padding: 10px;
}
.card-container .card a {
color: #00cc99;
text-decoration: none;
display: block;
font-size: 1.125em;
;
padding: 10px, 0px;
}
.card-container .card a:hover {
color: #8d4cd6;
}
<!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">
<title>Services</title>
<script src="https://kit.fontawesome.com/364bf5035f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Services</h1>
<div class="card-container">
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-code"></i>
</div>
<h3 class="card-title">web development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-tools"></i>
</div>
<h3 class="card-title">web design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-brush"></i>
</div>
<h3 class="card-title">Animation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
<div class="card">
<div class="card-icon">
<i class="fa-solid fa-bullhorn"></i>
</div>
<h3 class="card-title">digital marketing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, laborum nesciunt. Error, animi? Quidem saepe aliquam quaerat commodi nam minus adipisci provident aperiam sint cum.</p>
<a href="#">know more <i class="fa-solid fa-angles-right"></i></a>
</div>
</div>
</body>
</html>
Answered By - G-Cyrillus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.