1620020445
1618667723
how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.
#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css
1647702841
Grids, grids, grids. So many things we can do with them. But, so many properties we have to remember. 😅
If you are like me and you always have to resort to Google when using grids, the tricks we’ll cover in this guide will make your life as a developer much easier.
A grid generator is a website you can use to generate a grid in a few clicks. But why should you care about them? In my case, I use them quite often when I want to design the layout of my websites or a complex responsive structure inside an interface. Grids are great because they help you achieve a lot with just a few CSS lines, which saves a lot of time.
In this article, we will compare the following CSS grid generators and list their pros and cons so that you can bookmark your favorite one:
Also, to save you time, I made a cheat sheet with the essential CSS grid properties you should remember. 🥳 This cheat sheet is available at the bottom of this article.
I put CSS Grid Generator first on my list because I use it the most. It is an open source project designed by Sarah Drasner (the code of the project is available here if you want to contribute).
To give you an example, I recently needed to generate a simple grid with two rows and three columns. I didn’t remember how to set a specific size for the row gap and the column gap. With CSS Grid Generator, I was able to easily create the structure I desired and move on to more complex tasks.
.parent { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 60px; grid-row-gap: 30px; }
The final grid looked like this:
Pros:
Cons:
I could have put CSS Layout Generator first on the list. If you are looking to generate complicated grids all the time, this is probably the one you should bookmark. Developed by Braid Design System, CSS Layout Generator offers a wide range of options that will solve most headaches.
In my daily work, I use CSS Layout Generator templates a lot because they conveniently allow you to choose between a structure with a sidebar/container or a header/main/footer.
<section class="layout">
<!-- The left sidebar where you can put your navigation items etc. -->
<div class="sidebar">1</div>
<!-- The main content of your website -->
<div class="body">2</div>
</section>
<style>
.layout {
width: 1366px;
height: 768px;
display: grid;
/* This is the most important part where we define the size of our sidebar and body */
grid:
"sidebar body" 1fr
/ auto 1fr;
gap: 8px;
}
.sidebar {
grid-area: sidebar;
}
.body {
grid-area: body;
}
</style>
The Sidebar option looks like this:
Grid LayoutIt was developed by Leniolabs and is another grid generator that comes with many options. The code is available publicly on GitHub if you are interested in contributing.
Last week, a customer asked me to design an interface to display important metrics about his product (somewhat similar to Geckoboard). The layout he wanted was very precise but, thanks to LayoutIt, I generated the code in a few seconds.
<div class="container">
<div class="metric-1"></div>
<div class="metric-2"></div>
<div class="metrics-3"></div>
<div class="metric-4"></div>
<div class="metric-5"></div>
<div class="metric-6"></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"metric-1 metric-1 metric-2"
"metrics-3 metric-4 metric-2"
"metric-5 metric-5 metric-6";
}
.metric-1 {
grid-area: metric-1;
}
.metric-2 {
grid-area: metric-2;
}
.metrics-3 {
grid-area: metrics-3;
}
.metric-4 {
grid-area: metric-4;
}
.metric-5 {
grid-area: metric-5;
}
.metric-6 {
grid-area: metric-6;
}
</style>
The resulting layout looked like this:
In my past experience, I spent a lot of time using Griddy. It is a little less easy to use than the CSS grid made by Sarah Drasner, but it offers more options.
For example, it allows you to easily generate a four column grid with three rows:
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr 1fr;
grid-template-rows: 2fr 100px 1fr;
grid-column-gap: 10px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}
The resulting layout looks like this:
minmax()
functionCssgr.id is another great choice if you are looking for a grid generator that does not have too many options but enough to solve most use cases.
I used Cssgr.id last year to create a gallery because I remembered that it had a gallery template. In a few clicks, I was able to get something quite close to what I needed.
<div class="grid">
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 1</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 2</div>
<div class="span-row-2">Item 3</div>
<div class="span-row-3">Item 4</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 5</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 6</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 7</div>
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 8</div>
<!-- This item will take 2 columns and 3 rows -->
<div class="span-col-2 span-row-2">Item 9</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 10</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 11</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 12</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 13</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 14</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
/* Items with this class will take 3 columns */
.span-col-3 {
grid-column: span 3 / auto;
}
/* Items with this class will take 2 columns */
.span-col-2 {
grid-column: span 2 / auto;
}
/* Items with this class will take 2 rows */
.span-row-2 {
grid-row: span 2 / auto;
}
/* Items with this class will take 3 rows */
.span-row-3 {
grid-row: span 3 / auto;
}
</style>
The gallery looked like this:
Angry Tools CSS Grid is the last CSS grid generator on our list. It can be handy, though probably less user-friendly than the other tools highlighted in this guide.
Angry Tools CSS Grid is also useful when generating galleries. By clicking on the squares, you can define their sizes and their directions (horizontally or vertically).
<div class="angry-grid">
<div id="item-0">Item 0</div>
<div id="item-1">Item 1</div>
<div id="item-2">Item 2</div>
<div id="item-3">Item 3</div>
<div id="item-4">Item 4</div>
<div id="item-5">Item 5</div>
<div id="item-6">Item 6</div>
<div id="item-7">Item 7</div>
<div id="item-8">Item 8</div>
<div id="item-9">Item 9</div>
</div>
<style>
.angry-grid {
display: grid;
/* Our grid will be displayed using 3 rows */
grid-template-rows: 1fr 1fr 1fr;
/* Our grid will be displayed using 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* You can define a gap between your columns and your rows if you need to */
gap: 0px;
height: 100%;
}
/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
background-color: #8bf7ba;
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 2;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
background-color: #bf9aa7;
grid-row-start: 2;
grid-column-start: 3;
grid-row-end: 3;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
background-color: #c7656e;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 3;
}
/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
background-color: #b659df;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
background-color: #be6b5e;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
background-color: #5bb9d7;
grid-row-start: 3;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
background-color: #56adba;
grid-row-start: 1;
grid-column-start: 5;
grid-row-end: 3;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
background-color: #9cab58;
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
}
/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
background-color: #8558ad;
grid-row-start: 3;
grid-column-start: 3;
grid-row-end: 4;
grid-column-end: 4;
}
/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
background-color: #96b576;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
</style>
The resulting gallery looks like this:
CSS grid generators are great when you are not familiar with CSS properties. But, as you become a more advanced developer, you may find that a quick cheat sheet is probably handier.
😇 If it can help you, here is the one I have made for myself:
gap | Sets the gap size between the rows and columns. It is a shorthand for the following properties: row-gap and column-gap |
row-gap | Specifies the gap between the grid rows |
column-gap | Specifies the gap between the columns |
grid | A shorthand property for: grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-rows , grid-auto-columns , grid-auto-flow |
grid-area | Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-row-start , grid-column-start , grid-row-end , grid-column-end |
grid-auto-columns | Sets the size for the columns in a grid container |
grid-auto-flow | Controls how auto-placed items get inserted in the grid |
grid-auto-rows | Sets the size for the rows in a grid container |
grid-column | Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-column-start , grid-column-end |
grid-column-end | Defines how many columns an item will span or on which column-line the item will end |
grid-column-gap | Defines the size of the gap between the columns in a grid layout |
grid-column-start | Defines on which column-line the item will start |
grid-gap | Defines the size of the gap between the rows and columns in a grid layout and is a shorthand property for the following properties: grid-row-gap , grid-column-gap |
grid-row | Specifies a grid item’s size and location in a grid layout and is a shorthand property for the following properties: grid-row-start , grid-row-end |
grid-row-end | Defines how many rows an item will span or on which row-line the item will end |
grid-row-gap | Defines the size of the gap between the rows in a grid layout |
grid-row-start | Defines on which row-line the item will start |
grid-template | A shorthand property for the following properties: grid-template-rows , grid-template-columns , grid-template-areas |
grid-template-areas | Specifies areas within the grid layout |
grid-template-columns | Specifies the number (and the widths) of columns in a grid layout |
grid-template-rows | Specifies the number (and the heights) of the rows in a grid layout |
I hope this quick comparison of the best CSS grid generators helped you bookmark your favorite one.
Also, if I can give you a critical piece of advice when dealing with CSS grids: take your time. These generators are a great option because they can help you get the layouts you need step by step and avoid relying on a complicated solution.
Thank you for reading!
Source: https://blog.logrocket.com/comparing-best-css-grid-generators/
1647743100
Rejillas, rejillas, rejillas. Tantas cosas que podemos hacer con ellos. Pero, tantas propiedades que tenemos que recordar. 😅
Si eres como yo y siempre tienes que recurrir a Google cuando usas grillas, los trucos que veremos en esta guía te harán la vida mucho más fácil como desarrollador.
Un generador de cuadrículas es un sitio web que puede usar para generar una cuadrícula con unos pocos clics. Pero, ¿por qué deberías preocuparte por ellos? En mi caso, los uso con bastante frecuencia cuando quiero diseñar el diseño de mis sitios web o una estructura receptiva compleja dentro de una interfaz. Las cuadrículas son geniales porque te ayudan a lograr mucho con solo unas pocas líneas CSS, lo que ahorra mucho tiempo.
En este artículo, compararemos los siguientes generadores de grillas CSS y enumeraremos sus ventajas y desventajas para que pueda marcar su favorito:
Además, para ahorrarle tiempo, hice una hoja de trucos con las propiedades esenciales de la cuadrícula CSS que debe recordar. 🥳 Esta hoja de trucos está disponible al final de este artículo.
Puse CSS Grid Generator primero en mi lista porque lo uso más. Es un proyecto de código abierto diseñado por Sarah Drasner (el código del proyecto está disponible aquí si quieres contribuir).
Para darte un ejemplo, hace poco necesitaba generar una cuadrícula simple con dos filas y tres columnas. No recordaba cómo establecer un tamaño específico para el espacio entre filas y entre columnas. Con CSS Grid Generator, pude crear fácilmente la estructura que deseaba y pasar a tareas más complejas.
.parent { pantalla: cuadrícula; cuadrícula-plantilla-columnas: repetir (3, 1fr); cuadrícula-plantilla-filas: repetir (2, 1fr); cuadrícula-columna-brecha: 60px; cuadrícula-fila-brecha: 30px; }
La cuadrícula final se veía así:
Ventajas:
Contras:
Podría haber puesto el Generador de diseño CSS primero en la lista. Si está buscando generar cuadrículas complicadas todo el tiempo, esta es probablemente la que debería marcar. Desarrollado por Braid Design System , CSS Layout Generator ofrece una amplia gama de opciones que resolverán la mayoría de los dolores de cabeza.
En mi trabajo diario, uso mucho las plantillas CSS Layout Generator porque te permiten elegir convenientemente entre una estructura con una barra lateral/contenedor o un encabezado/principal/pie de página.
<section class="layout">
<!-- The left sidebar where you can put your navigation items etc. -->
<div class="sidebar">1</div>
<!-- The main content of your website -->
<div class="body">2</div>
</section>
<style>
.layout {
width: 1366px;
height: 768px;
display: grid;
/* This is the most important part where we define the size of our sidebar and body */
grid:
"sidebar body" 1fr
/ auto 1fr;
gap: 8px;
}
.sidebar {
grid-area: sidebar;
}
.body {
grid-area: body;
}
</style>
La opción de la barra lateral se ve así:
Grid Layout fue desarrollado por Leniolabs y es otro generador de grillas que viene con muchas opciones. El código está disponible públicamente en GitHub si está interesado en contribuir .
La semana pasada, un cliente me pidió que diseñara una interfaz para mostrar métricas importantes sobre su producto (algo similar a Geckoboard ). El diseño que quería era muy preciso pero, gracias a LayoutIt, generé el código en unos segundos.
<div class="container">
<div class="metric-1"></div>
<div class="metric-2"></div>
<div class="metrics-3"></div>
<div class="metric-4"></div>
<div class="metric-5"></div>
<div class="metric-6"></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"metric-1 metric-1 metric-2"
"metrics-3 metric-4 metric-2"
"metric-5 metric-5 metric-6";
}
.metric-1 {
grid-area: metric-1;
}
.metric-2 {
grid-area: metric-2;
}
.metrics-3 {
grid-area: metrics-3;
}
.metric-4 {
grid-area: metric-4;
}
.metric-5 {
grid-area: metric-5;
}
.metric-6 {
grid-area: metric-6;
}
</style>
El diseño resultante se veía así:
En mi experiencia pasada, pasé mucho tiempo usando Griddy . Es un poco menos fácil de usar que la cuadrícula CSS creada por Sarah Drasner, pero ofrece más opciones.
Por ejemplo, le permite generar fácilmente una cuadrícula de cuatro columnas con tres filas:
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr 1fr;
grid-template-rows: 2fr 100px 1fr;
grid-column-gap: 10px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}
El diseño resultante se ve así:
minmax()
funcionCssgr.id es otra excelente opción si está buscando un generador de cuadrícula que no tenga demasiadas opciones pero sí las suficientes para resolver la mayoría de los casos de uso.
Usé Cssgr.id el año pasado para crear una galería porque recordé que tenía una plantilla de galería. Con unos pocos clics, pude obtener algo bastante parecido a lo que necesitaba.
<div class="grid">
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 1</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 2</div>
<div class="span-row-2">Item 3</div>
<div class="span-row-3">Item 4</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 5</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 6</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 7</div>
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 8</div>
<!-- This item will take 2 columns and 3 rows -->
<div class="span-col-2 span-row-2">Item 9</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 10</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 11</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 12</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 13</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 14</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
/* Items with this class will take 3 columns */
.span-col-3 {
grid-column: span 3 / auto;
}
/* Items with this class will take 2 columns */
.span-col-2 {
grid-column: span 2 / auto;
}
/* Items with this class will take 2 rows */
.span-row-2 {
grid-row: span 2 / auto;
}
/* Items with this class will take 3 rows */
.span-row-3 {
grid-row: span 3 / auto;
}
</style>
La galería quedó así:
Angry Tools CSS Grid es el último generador de cuadrículas CSS de nuestra lista. Puede ser útil, aunque probablemente menos fácil de usar que las otras herramientas destacadas en esta guía.
Angry Tools CSS Grid también es útil para generar galerías. Al hacer clic en los cuadrados, puede definir sus tamaños y sus direcciones (horizontal o verticalmente).
<div class="angry-grid">
<div id="item-0">Item 0</div>
<div id="item-1">Item 1</div>
<div id="item-2">Item 2</div>
<div id="item-3">Item 3</div>
<div id="item-4">Item 4</div>
<div id="item-5">Item 5</div>
<div id="item-6">Item 6</div>
<div id="item-7">Item 7</div>
<div id="item-8">Item 8</div>
<div id="item-9">Item 9</div>
</div>
<style>
.angry-grid {
display: grid;
/* Our grid will be displayed using 3 rows */
grid-template-rows: 1fr 1fr 1fr;
/* Our grid will be displayed using 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* You can define a gap between your columns and your rows if you need to */
gap: 0px;
height: 100%;
}
/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
background-color: #8bf7ba;
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 2;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
background-color: #bf9aa7;
grid-row-start: 2;
grid-column-start: 3;
grid-row-end: 3;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
background-color: #c7656e;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 3;
}
/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
background-color: #b659df;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
background-color: #be6b5e;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
background-color: #5bb9d7;
grid-row-start: 3;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
background-color: #56adba;
grid-row-start: 1;
grid-column-start: 5;
grid-row-end: 3;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
background-color: #9cab58;
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
}
/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
background-color: #8558ad;
grid-row-start: 3;
grid-column-start: 3;
grid-row-end: 4;
grid-column-end: 4;
}
/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
background-color: #96b576;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
</style>
La galería resultante se ve así:
Los generadores de cuadrículas CSS son excelentes cuando no está familiarizado con las propiedades CSS. Pero, a medida que se convierte en un desarrollador más avanzado, es posible que una hoja de trucos rápidos sea probablemente más útil.
😇 Si te puede ayudar, aquí está el que he hecho para mí:
gap | Establece el tamaño del espacio entre las filas y las columnas. Es una forma abreviada de las siguientes propiedades: row-gap ycolumn-gap |
row-gap | Especifica el espacio entre las filas de la cuadrícula. |
column-gap | Especifica el espacio entre las columnas. |
grid | Una propiedad abreviada para: grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-rows , grid-auto-columns ,grid-auto-flow |
grid-area | Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-start , grid-column-start , grid-row-end ,grid-column-end |
grid-auto-columns | Establece el tamaño de las columnas en un contenedor de cuadrícula. |
grid-auto-flow | Controla cómo se insertan en la cuadrícula los elementos colocados automáticamente |
grid-auto-rows | Establece el tamaño de las filas en un contenedor de cuadrícula |
grid-column | Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-column-start ,grid-column-end |
grid-column-end | Define cuántas columnas abarcará un elemento o en qué línea de columna terminará el elemento |
grid-column-gap | Define el tamaño del espacio entre las columnas en un diseño de cuadrícula |
grid-column-start | Define en qué línea de columna comenzará el elemento |
grid-gap | Define el tamaño del espacio entre filas y columnas en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-gap ,grid-column-gap |
grid-row | Especifica el tamaño y la ubicación de un elemento de cuadrícula en un diseño de cuadrícula y es una propiedad abreviada para las siguientes propiedades: grid-row-start ,grid-row-end |
grid-row-end | Define cuántas filas abarcará un elemento o en qué línea de fila terminará el elemento |
grid-row-gap | Define el tamaño del espacio entre las filas en un diseño de cuadrícula |
grid-row-start | Define en qué línea de fila comenzará el artículo |
grid-template | Una propiedad abreviada para las siguientes propiedades: grid-template-rows , grid-template-columns ,grid-template-areas |
grid-template-areas | Especifica áreas dentro del diseño de cuadrícula. |
grid-template-columns | Especifica el número (y el ancho) de las columnas en un diseño de cuadrícula |
grid-template-rows | Especifica el número (y las alturas) de las filas en un diseño de cuadrícula |
Espero que esta comparación rápida de los mejores generadores de grillas CSS te haya ayudado a marcar tu favorito.
Además, si puedo darte un consejo crítico cuando trabajes con grillas CSS: tómate tu tiempo. Estos generadores son una excelente opción porque pueden ayudarlo a obtener los diseños que necesita paso a paso y evitar depender de una solución complicada.
¡Gracias por leer!
Fuente: https://blog.logrocket.com/comparing-best-css-grid-generators/
1647732000
グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅
あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。
グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか?私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。
この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。
また、時間を節約するために、覚えておく必要のある重要なCSSグリッドプロパティを使用してチートシートを作成しました。🥳このチートシートは、この記事の下部にあります。
CSSグリッドジェネレーターを最もよく使用するので、リストの最初に置きます。これはSarahDrasnerによって設計されたオープンソースプロジェクトです(プロジェクトのコードは、貢献したい場合はここから入手できます)。
例を挙げると、最近、2行3列の単純なグリッドを生成する必要がありました。行ギャップと列ギャップに特定のサイズを設定する方法を覚えていませんでした。CSS Grid Generatorを使用すると、必要な構造を簡単に作成して、より複雑なタスクに進むことができました。
.parent {表示:グリッド; grid-template-columns:repeat(3、1fr); grid-template-rows:repeat(2、1fr); grid-column-gap:60px; grid-row-gap:30px; }
最終的なグリッドは次のようになりました。
長所:
短所:
CSSレイアウトジェネレーターをリストの最初に置くこともできます。常に複雑なグリッドを生成する場合は、これをブックマークする必要があります。ブレードデザインシステムによって開発されたCSSレイアウトジェネレーターは、ほとんどの頭痛の種を解決する幅広いオプションを提供します。
私の日常業務では、CSSレイアウトジェネレーターテンプレートを頻繁に使用します。これは、サイドバー/コンテナーまたはヘッダー/メイン/フッターのある構造を便利に選択できるためです。
<section class="layout">
<!-- The left sidebar where you can put your navigation items etc. -->
<div class="sidebar">1</div>
<!-- The main content of your website -->
<div class="body">2</div>
</section>
<style>
.layout {
width: 1366px;
height: 768px;
display: grid;
/* This is the most important part where we define the size of our sidebar and body */
grid:
"sidebar body" 1fr
/ auto 1fr;
gap: 8px;
}
.sidebar {
grid-area: sidebar;
}
.body {
grid-area: body;
}
</style>
サイドバーオプションは次のようになります。
グリッドレイアウトこれはLeniolabsによって開発されたもので、多くのオプションを備えたもう1つのグリッドジェネレーターです。貢献に興味がある場合は、コードをGitHubで公開しています。
先週、顧客から、製品に関する重要なメトリックを表示するためのインターフェイスを設計するように依頼されました(Geckoboardに多少似ています)。彼が望んでいたレイアウトは非常に正確でしたが、LayoutItのおかげで、数秒でコードを生成できました。
<div class="container">
<div class="metric-1"></div>
<div class="metric-2"></div>
<div class="metrics-3"></div>
<div class="metric-4"></div>
<div class="metric-5"></div>
<div class="metric-6"></div>
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"metric-1 metric-1 metric-2"
"metrics-3 metric-4 metric-2"
"metric-5 metric-5 metric-6";
}
.metric-1 {
grid-area: metric-1;
}
.metric-2 {
grid-area: metric-2;
}
.metrics-3 {
grid-area: metrics-3;
}
.metric-4 {
grid-area: metric-4;
}
.metric-5 {
grid-area: metric-5;
}
.metric-6 {
grid-area: metric-6;
}
</style>
結果のレイアウトは次のようになります。
私の過去の経験では、Griddyを使用して多くの時間を費やしました。Sarah Drasnerによって作成されたCSSグリッドよりも使いやすさは少し劣りますが、より多くのオプションが提供されます。
たとえば、次の3行の4列グリッドを簡単に生成できます。
.container {
display: grid;
grid-template-columns: 1fr 300px 1fr 1fr;
grid-template-rows: 2fr 100px 1fr;
grid-column-gap: 10px
grid-row-gap: 20px
justify-items: stretch
align-items: stretch
}
結果のレイアウトは次のようになります。
minmax()
機能はありませんCssgr.idは、オプションが多すぎないが、ほとんどのユースケースを解決するのに十分なグリッドジェネレーターを探している場合のもう1つの優れた選択肢です。
ギャラリーテンプレートがあることを思い出したので、昨年Cssgr.idを使用してギャラリーを作成しました。数回クリックするだけで、必要なものに非常に近いものを得ることができました。
<div class="grid">
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 1</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 2</div>
<div class="span-row-2">Item 3</div>
<div class="span-row-3">Item 4</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 5</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 6</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 7</div>
<!-- This item will take 3 columns and 2 rows -->
<div class="span-col-3 span-row-2">Item 8</div>
<!-- This item will take 2 columns and 3 rows -->
<div class="span-col-2 span-row-2">Item 9</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 10</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 11</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 12</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 13</div>
<!-- This item will take 1 column and 1 row -->
<div>Item 14</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
/* Items with this class will take 3 columns */
.span-col-3 {
grid-column: span 3 / auto;
}
/* Items with this class will take 2 columns */
.span-col-2 {
grid-column: span 2 / auto;
}
/* Items with this class will take 2 rows */
.span-row-2 {
grid-row: span 2 / auto;
}
/* Items with this class will take 3 rows */
.span-row-3 {
grid-row: span 3 / auto;
}
</style>
ギャラリーは次のようになりました。
Angry Tools CSSグリッドは、リストの最後のCSSグリッドジェネレーターです。このガイドで強調表示されている他のツールよりもユーザーフレンドリーではないかもしれませんが、便利な場合があります。
Angry Tools CSSグリッドは、ギャラリーを生成するときにも役立ちます。正方形をクリックすると、サイズと方向(水平または垂直)を定義できます。
<div class="angry-grid">
<div id="item-0">Item 0</div>
<div id="item-1">Item 1</div>
<div id="item-2">Item 2</div>
<div id="item-3">Item 3</div>
<div id="item-4">Item 4</div>
<div id="item-5">Item 5</div>
<div id="item-6">Item 6</div>
<div id="item-7">Item 7</div>
<div id="item-8">Item 8</div>
<div id="item-9">Item 9</div>
</div>
<style>
.angry-grid {
display: grid;
/* Our grid will be displayed using 3 rows */
grid-template-rows: 1fr 1fr 1fr;
/* Our grid will be displayed using 4 columns */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
/* You can define a gap between your columns and your rows if you need to */
gap: 0px;
height: 100%;
}
/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
background-color: #8bf7ba;
grid-row-start: 1;
grid-column-start: 4;
grid-row-end: 2;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
background-color: #bf9aa7;
grid-row-start: 2;
grid-column-start: 3;
grid-row-end: 3;
grid-column-end: 5;
}
/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
background-color: #c7656e;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 3;
}
/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
background-color: #b659df;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
background-color: #be6b5e;
grid-row-start: 3;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 3;
}
/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
background-color: #5bb9d7;
grid-row-start: 3;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
background-color: #56adba;
grid-row-start: 1;
grid-column-start: 5;
grid-row-end: 3;
grid-column-end: 6;
}
/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
background-color: #9cab58;
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
}
/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
background-color: #8558ad;
grid-row-start: 3;
grid-column-start: 3;
grid-row-end: 4;
grid-column-end: 4;
}
/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
background-color: #96b576;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
</style>
結果のギャラリーは次のようになります。
CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。
😇それがあなたを助けることができるなら、これが私が自分のために作ったものです:
gap | 行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gap 。column-gap |
row-gap | グリッド行間のギャップを指定します |
column-gap | 列間のギャップを指定します |
grid | grid-template-rows の省略grid-template-columns 形プロパティ:grid-template-areas 、、、、、、grid-auto-rowsgrid-auto-columnsgrid-auto-flow |
grid-area | グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです:grid-row-start 、、、grid-column-startgrid-row-endgrid-column-end |
grid-auto-columns | グリッドコンテナの列のサイズを設定します |
grid-auto-flow | 自動配置されたアイテムをグリッドに挿入する方法を制御します |
grid-auto-rows | グリッドコンテナの行のサイズを設定します |
grid-column | グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-column-start 、grid-column-end |
grid-column-end | アイテムがまたがる列の数、またはアイテムが終了する列行を定義します |
grid-column-gap | グリッドレイアウトの列間のギャップのサイズを定義します |
grid-column-start | アイテムが開始する列行を定義します |
grid-gap | グリッドレイアウトの行と列の間のギャップのサイズを定義し、次のプロパティの省略形のプロパティです。grid-row-gap 、grid-column-gap |
grid-row | グリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-row-start 、grid-row-end |
grid-row-end | アイテムがまたがる行数、またはアイテムが終了する行行を定義します |
grid-row-gap | グリッドレイアウトの行間のギャップのサイズを定義します |
grid-row-start | アイテムが開始する行行を定義します |
grid-template | 次のプロパティの省略形プロパティ:grid-template-rows 、、grid-template-columnsgrid-template-areas |
grid-template-areas | グリッドレイアウト内の領域を指定します |
grid-template-columns | グリッドレイアウトの列の数(および幅)を指定します |
grid-template-rows | グリッドレイアウトの行の数(および高さ)を指定します |
最高のCSSグリッドジェネレーターのこの簡単な比較が、お気に入りのジェネレーターをブックマークするのに役立つことを願っています。
また、CSSグリッドを扱うときに重要なアドバイスを提供できる場合は、時間をかけてください。これらのジェネレーターは、必要なレイアウトを段階的に取得し、複雑なソリューションに依存することを回避するのに役立つため、優れたオプションです。
読んでくれてありがとう!
ソース:https ://blog.logrocket.com/comparing-best-css-grid-generators/
1619013192
Demo Click Here: https://cutt.ly/2vFKuxe
#portfolio website html css #personal website html css #personal portfolio website #how to create a complete peronal portfolio website #responsive portfolio website html css #responsive personal portfolio website html css