Display all grid elements in a single row in css-CodePudding

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 >Our Services</h1>
  <div >
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>
    <br><br>
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>
    <br><br>
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>
    <br><br>
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></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.

CodePudding user response：

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 >Our Services</h1>
  <div >
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>
   
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>

    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>
 
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>
  </div>
</body>

</html>

CodePudding user response：

You can't use <br> inside a grid-container, as it is counted as a grid-item. Remove those, and instead use grid-row-gap and grid-column-gap to create a gap between the grid-items.

For a fully responsive grid, I used

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

This choice of layout forces the grid-container to make as many new columns with a grid-item as possible inside a single row, but each grid-item must have at least 250px width, otherwise it will wrap into a new row. You can change the value to fit your needs.

You can use grid-auto-rows: 1fr; for equal height columns.

@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: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 1fr;
  grid-column-gap: 15px;
  grid-row-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 >Our Services</h1>
  <div >
    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>

    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>

    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>

    <div >
      <div >
        <i ></i>
      </div>
      <h3 >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 ></i></a>
    </div>
  </div>
</body>

</html>