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;
}

ESCRIBE AQUÍ TUS CONSULTAS O PREGUNTAS Y TE RESPONDEREMOS EN BREVE

Escribe tu pregunta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *