Grid css responsive – Sin media queries – 2 Columnas – 3 Columnas
Vamos a crear una página web básica utilizando Grid css con repeat(auto-fit,minmax(20rem,1fr)) para que las columnas sean responsive design sin utilizar media queries.
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="image/logo.png" alt="">
<div class="derecha">
<a href="" class="btnPhone">
LLAMAR
</a>
</div>
</header>
<section class="banner">
<div class="containerB">
<div class="boxB col1">
<img src="image/foto.svg" class="imgBanner" alt="">
</div>
<div class="boxB col2">
<h1>Alcanza tus Objetivos de Negocios</h1>
<p id="txtBanner">
Recuerda que los seres mas inocentes y de corazón puro son los animales, por favor no los trates mal, recuerda que ellos también sufren y sienten
dolor al igual que tu.
</p>
<div>
<a href="" class="btnBanner">VER SERVICIOS</a>
</div>
</div>
</div>
</section>
<section class="services">
<div class="subServices">
<h2>Nuestros servicios</h2>
<br>
<p>Asesoría y Capacitación en Negocios, Marketing y
tecnología <br> Crecemos e innovamos contigo
</p>
</div>
<div class="containerS">
<div class="boxS">
<img src="image/icon1.png" alt="">
<h3>Marketing Estratégico</h3>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="boxS">
<img src="image/icon1.png" alt="">
<h3>Marketing Estratégico</h3>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="boxS">
<img src="image/icon1.png" alt="">
<h3>Marketing Estratégico</h3>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
</section>
</body>
</html>style.css
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
header{
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.derecha{
text-align: right;
}
.btnPhone{
background: #393939;
color: #fefefe;
text-decoration: none;
border-radius: 25px;
padding: 10px 15px;
}
section.banner{
background: linear-gradient(to left, rgb(255 255 255), rgb(234 243 240));
padding: 3rem 0;
}
.containerB{
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
grid-gap: 2rem;
}
.col1{
display: flex;
align-items: center;
justify-content: center;
}
.imgBanner{
width: 70%;
}
.col2{
padding: 1rem 2rem;
display: flex;
justify-content: center;
flex-direction: column;
}
h1{
font-size: 2rem;
color: #21a6cb;
}
#txtBanner{
margin: 2rem 0;
font-size: 1.3rem;
line-height: 2rem;
}
.btnBanner{
background: #4cb1d5;
color: #fff;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
}
/*SERVICIOS*/
.services{
padding: 3rem 0;
}
.subServices{
text-align: center;
padding-bottom: 2rem;
color: #4c4c4c;
}
.containerS{
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(18rem,1fr));
grid-gap: 1.2rem;
}
.boxS{
padding: 2rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 55px 5px rgb(0 0 0 / 6%);
}
.boxS img{
width: 100px;
}
h3{
color: #4c4c4c;
margin: 10px 0;
}
.boxS p{
text-align: center;
}