Skip to main content

Equal Height Column Responsive Design | HTML And CSS

by Rustcode
Responsive-Column-Equal-Height-HTML-And-CSS-Rustcode

Equal Height Column Responsive Design Using HTML And CSS

"Equal height columns" are often used in almost every website because the websites have different card groups (eg: product cards, profile cards, content cards, course cards, blog cards) that card the equal height column concept. Use. If the card height is uneven, the user interface looks wired.

In this article, we will design columns of equal height. There are four columns in this design that we will use to show data-title and description. This animation is fully responsive that can be used in mobile, desktop, and tablet.

We have more design tutorials which are generally used in website development. You can read them.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Equal Height Column Responsive Design</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

<!DOCTYPE html>
<html>
<head>
  <title>Equal Height Column Responsive</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<br><br>
<br><br>
<br><br>
  <div class="row">
    <div class="col">
      <h1>Column 1</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim nibh nec sem facilisis maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas arcu ante, eget fermentum lorem consequat in. Vivamus at mi eu dolor ornare varius. Praesent non est in orci mollis ultrices at non enim.
      </p>
    </div>

    <div class="col">
      <h1>Column 2</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim nibh nec sem facilisis maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas arcu ante, eget fermentum lorem consequat in. Vivamus at mi eu dolor ornare varius. Praesent non est in orci mollis ultrices at non enim.
      </p>
    </div>

    <div class="col">
      <h1>Column 3</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim nibh nec sem facilisis maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas arcu ante, eget fermentum lorem consequat in. Vivamus at mi eu dolor ornare varius. Praesent non est in orci mollis ultrices at non enim.
      </p>
    </div>

    <div class="col">
      <h1>Column 4</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim nibh nec sem facilisis maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas arcu ante, eget fermentum lorem consequat in. Vivamus at mi eu dolor ornare varius. Praesent non est in orci mollis ultrices at non enim.
      </p>
    </div>
  </div>

</body>
</html>



03. CSS

*{
  box-sizing: border-box;
}
body{
  color: grey;
  font-family: sans-serif;
}
.row{
  box-sizing: border-box;
  width: 100%;
}
.col{
  box-sizing: border-box;
  width: calc(25% - 10px);
  margin: 5px;
  float: left;
  height: 400px;
  padding: 18px;
  text-align: justify;
  border: 1px solid grey;
}
.col h1{
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
}
.col p{
  line-height: 1.5em;
}
@media screen and (max-width: 1150px) {
  .col{
    width: calc(50% - 10px);
    height: 330px;
  }
}
@media screen and (max-width: 750px) {
  .col{
    width: 100%;
    height: 300px;
  }
}




04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment