![\"\"](\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Diseno-web-Responsive-Vista-de-cuadricula-Grid-1-1024x255.png\")
<\/figure>\n\n\n\nEl uso de una vista de cuadr\u00edcula<\/strong> es muy \u00fatil al dise\u00f1ar p\u00e1ginas web. Facilita la colocaci\u00f3n de elementos en la p\u00e1gina.<\/p>\n\n\n\n Una vista de cuadr\u00edcula Responsive<\/strong> a menudo tiene 12 columnas y tiene un ancho total del 100%, y se reducir\u00e1 y expandir\u00e1 a medida que cambia el tama\u00f1o de la ventana del navegador.<\/p>\n\n\n\n Comencemos a construir una vista de cuadr\u00edcula responsive<\/strong>. Primero, hay que asegurarse de que todos los elementos HTML<\/strong> tengan la propiedad box-sizing<\/em><\/strong> establecida en border-box<\/em><\/strong>. Esto asegura que el relleno<\/strong> y el borde<\/strong> est\u00e9n incluidos en el ancho y alto total de los elementos.<\/p>\n\n\n\n Agrega el siguiente c\u00f3digo en su CSS:<\/p>\n\n\n\n El siguiente ejm muestra una p\u00e1gina sencilla responsive con 2 columnas.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n El ejemplo anterior est\u00e1 bien si la p\u00e1gina web solo contiene dos columnas. Sin embargo, queremos usar una vista de cuadr\u00edcula receptiva con 12 columnas para tener m\u00e1s control sobre la p\u00e1gina web. Primero debemos calcular el porcentaje para una columna: 100% \/ 12 columnas = 8,33%. Luego creamos una clase para cada una de las 12 columnas, class=\u00bbcol-\u00bb y un n\u00famero que define cu\u00e1ntas columnas debe abarcar la secci\u00f3n.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Todas estas columnas deben estar flotando a la izquierda y tener un padding<\/strong> de 15px:<\/p>\n\n\n\n Cada fila debe estar envuelta en un <div><\/em><\/strong>. El n\u00famero de columnas dentro de una fila siempre debe sumar 12:<\/p>\n\n\n\n Las columnas dentro de una fila est\u00e1n todas flotando hacia la izquierda y, por lo tanto, se eliminan del flujo de la p\u00e1gina, y otros elementos se colocar\u00e1n como si las columnas no existieran. Para evitar esto, agregaremos un estilo que borre el flujo:<\/p>\n\n\n\n Tambi\u00e9n queremos agregar algunos estilos y colores para que se vea mejor:<\/p>\n\n\n\n Nuestro ejm completo quedar\u00eda de la siguiente manera.<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Que es una vista Grid (cuadr\u00edcula) Muchas p\u00e1ginas web se basan en una vista de cuadr\u00edcula, lo que significa que […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1464,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1475","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Que es una vista Grid (cuadr\u00edcula) Muchas p\u00e1ginas web se basan en una vista de cuadr\u00edcula, lo que significa que […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1475"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1475\/revisions"}],"predecessor-version":[{"id":1479,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1475\/revisions\/1479"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1464"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/Diseno-web-Responsive-Vista-de-cuadricula-Grid-2-1024x366.png\")
<\/figure>\n\n\n\nCreaci\u00f3n de una vista de cuadr\u00edcula responsive<\/h2>\n\n\n\n
* {\n box-sizing: border-box;\n}<\/pre>\n\n\n\n<!DOCTYPE html>
<html lang=\"es\">
<head>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
<\/style>
<\/head>
<body>
<div class=\"header\">
<h1>Chania<\/h1>
<\/div>
<div class=\"menu\">
<ul>
<li>Link 1<\/li>
<li>Link 2<\/li>
<li>Link 3<\/li>
<\/ul>
<\/div>
<div class=\"main\">
<h1>Prueba<\/h1>
<p>Esto es una prueba<\/p>
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\n<!DOCTYPE html>
<html lang=\"es\">
<head>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
<title>CSS Grid<\/title>
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row::after {
content: \"\";
clear: both;
display: table;
}
[class*=\"col-\"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
<\/style>
<\/head>
<body>
<div class=\"header\">
<h1>Pruebas CSS Grid<\/h1>
<\/div>
<div class=\"row\">
<div class=\"col-3\">
<ul>
<li>Link 1<\/li>
<li>Link 2<\/li>
<li>Link 3<\/li>
<\/ul>
<\/div>
<div class=\"col-9\">
<h1>La ciudad<\/h1>
<p>Aqui escribimos nuestro texto...<\/p>
<\/div>
<\/div>
<\/body>
<\/html><\/pre>\n\n\n\nExplicaci\u00f3n del ejm<\/h2>\n\n\n\n
[class*=\"col-\"] {\n float: left;\n padding: 15px;\n border: 1px solid red;\n}<\/pre>\n\n\n\n<div class=\"row\">\n <div class=\"col-3\">...<\/div> <!-- 25% -->\n <div class=\"col-9\">...<\/div> <!-- 75% -->\n<\/div><\/pre>\n\n\n\n
.row::after {\n content: \"\";\n clear: both;\n display: table;\n}<\/pre>\n\n\n\nhtml {\n font-family: \"Lucida Sans\", sans-serif;\n}\n\n.header {\n background-color: #9933cc;\n color: #ffffff;\n padding: 15px;\n}\n\n.menu ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n\n.menu li {\n padding: 8px;\n margin-bottom: 7px;\n background-color :#33b5e5;\n color: #ffffff;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\n\n.menu li:hover {\n background-color: #0099cc;\n}<\/pre>\n\n\n\n<!DOCTYPE html>
<html>
<head>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>
<style>
* {
box-sizing: border-box;
}
.row::after {
content: \"\";
clear: both;
display: table;
}
[class*=\"col-\"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
html {
font-family: \"Lucida Sans\", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
background-color: #0099cc;
}
<\/style>
<\/head>
<body>
<div class=\"header\">
<h1>Chania<\/h1>
<\/div>
<div class=\"row\">
<div class=\"col-3 menu\">
<ul>
<li>The Flight<\/li>
<li>The City<\/li>
<li>The Island<\/li>
<li>The Food<\/li>
<\/ul>
<\/div>
<div class=\"col-9\">
<h1>The City<\/h1>
<p>
Chania is the capital of the Chania region on the island of Crete. The
city can be divided in two parts, the old town and the modern city.
<\/p>
<p>
Resize the browser window to see how the content respond to the
resizing.
<\/p>
<\/div>
<\/div>
<\/body>
<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"