Avav Smith

Avav Smith

1613582580

A React Component to Sort Items in Lists or Grids

react-easy-sort

A React component to sort items in lists or grids

react-easy-sort-demo

The goal of this component is to allow sorting elements with drag and drop.

It is mobile friendly by default. It doesn’t block scrolling the page when swiping inside it: the user needs to press an item during at least 200ms to start the drag gesture.

On non-touch device, the drag gesture only starts after moving an element by at least one pixel. This is done to avoid blocking clicks on clickable elements inside an item.

Features

  • Supports horizontal and vertical lists
  • Supports grid layouts
  • Mobile-friendly
  • IE11 support 🙈

Demo

Check out the examples:

Installation

yarn add react-easy-sort

or

npm install react-easy-sort --save

Basic usage

import SortableList, { SortableItem } from 'react-easy-sort'
import arrayMove from 'array-move'

const App = () => {
  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])

  const onSortEnd = (oldIndex: number, newIndex: number) => {
    setItems((array) => arrayMove(array, oldIndex, newIndex))
  }

  return (
    <SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
      {items.map((item) => (
        <SortableItem key={item}>
          <div className="item">{item}</div>
        </SortableItem>
      ))}
    </SortableList>
  )
}

Props

SortableList

Name Description Type Default
onSortEnd* Called when the user finishes a sorting gesture. (oldIndex: number, newIndex: number) => void -
draggedItemClassName Class applied to the item being dragged string -

SortableItem

This component doesn’t take any other props than its child. This child should be a single React element that can receives a ref. If you pass a component as a child, it needs to be wrapped with React.forwardRef().

Development

yarn
yarn start

Now, open http://localhost:3001/index.html and start hacking!

License

MIT

Alternatives

Download Details:

Author: ricardo-ch

Demo: https://codesandbox.io/s/react-easy-sort-images-demo-486qk

Source Code: https://github.com/ricardo-ch/react-easy-sort

#react #reactjs #javascript

What is GEEK

Buddha Community

A React Component to Sort Items in Lists or Grids

Comparing the best CSS grid generators

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.

What are CSS grid generators?

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:

  • CSS Grid Generator
  • CSS Layout Generator
  • Grid LayoutIt
  • Griddy
  • Cssgr.id
  • Angry Tools CSS Grid

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.

1. CSS Grid Generator

CSS Grid Generator

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:

Example Of CSS Grid Generator

Pros:

  • The interface is user-friendly and the colors are well-chosen, making CSS Grid Generator an excellent tool for beginners who want to become more familiar with CSS grids
  • CSS Grid Generator can help you get the result you want for most use cases because you can specify the number of columns, rows, and gaps across your grids
  • Just hit one button to preview the code and copy it to your clipboard

Cons:

  • There is no template you can choose to save you time
  • You will not be able to generate complicated layouts

2. CSS Layout Generator

CSS Layout Generator

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:

Example Of CSS Layout Generator

Pros:

  • CSS Layout Generator allows you to choose between six standard templates to get started faster
  • There are many options to solve nearly all use cases
  • You can switch between grids and Flexbox, which is helpful to compare both options
  • The interface is excellent and user-friendly

Cons:

  • Because it offers so many options, CSS Layout Generator can be confusing for a beginner

3. Grid LayoutIt

Grid LayoutIt

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:

Example Of Grid LayoutIt

Pros:

  • Grid LayoutIt is intuitive to use and it provides many options
  • You can set your columns and your rows using pixels (px), fractionals (fr), and percentages (%)
  • Your layouts can be exported to CodePen, CodeSandbox, or StackBlitz in one click
  • The interface is well-designed, with a proper contrast between the options and the grid preview
  • Grid LayoutIt supports grid placement options

Cons:

  • This generator does not provide templates to save you time, which is the main reason why I put it third on the list

4. Griddy

Griddy

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:

Example Of Griddy

Pros:

  • You can set your columns and your rows using pixels (px), fractionals (fr), and percentages (%)
  • The provided options are enough to solve most use cases and test different alignments. In a nutshell, it gets the job done

Cons:

  • It may be a question of taste, but the sidebar with the options is not the best interface for me. You have to scroll for a while to get what you are looking for
  • There are no templates to choose from
  • There is no minmax() function

5. Cssgr.id

CSS Grid

Cssgr.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:

Example Of CSSGrid

Pros:

  • Cssgr.id comes with five practical starter layouts to choose from (3×3, football formation, header/footer, gallery, and generic website)
  • You can add placeholder text to see how it renders with some written content
  • It has a well-designed interface that can be easily configured

Cons:

  • It is not the grid generator with the most options

6. Angry Tools CSS Grid

Angry Tools CSS Grid

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:

Example Of Angry Tools

Pros:

  • Angry Tools CSS Grid comes with some templates you can choose from

Cons:

  • It does not have the best design overall. To be honest, it is quite ugly and can be hard to use
  • I would not recommend this tool for beginners. Advanced developers should also probably choose either CSS Layout Generator or Grid LayoutIt instead
  • You have to scroll to get the CSS outputs

BONUS: CSS grid cheat sheet

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:

gapSets the gap size between the rows and columns. It is a shorthand for the following properties: row-gap and column-gap
row-gapSpecifies the gap between the grid rows
column-gapSpecifies the gap between the columns
gridA shorthand property for: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
grid-areaSpecifies 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-columnsSets the size for the columns in a grid container
grid-auto-flowControls how auto-placed items get inserted in the grid
grid-auto-rowsSets the size for the rows in a grid container
grid-columnSpecifies 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-endDefines how many columns an item will span or on which column-line the item will end
grid-column-gapDefines the size of the gap between the columns in a grid layout
grid-column-startDefines on which column-line the item will start
grid-gapDefines 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-rowSpecifies 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-endDefines how many rows an item will span or on which row-line the item will end
grid-row-gapDefines the size of the gap between the rows in a grid layout
grid-row-startDefines on which row-line the item will start
grid-templateA shorthand property for the following properties: grid-template-rows, grid-template-columns, grid-template-areas
grid-template-areasSpecifies areas within the grid layout
grid-template-columnsSpecifies the number (and the widths) of columns in a grid layout
grid-template-rowsSpecifies 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/

#css 

Saul  Alaniz

Saul Alaniz

1647743100

Comparando Los Mejores Generadores De Grid CSS

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.

¿Qué son los generadores de grid CSS?

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:

  • Generador de cuadrícula CSS
  • Generador de diseño CSS
  • Diseño de cuadrícula
  • rejilla
  • cssgr.id
  • Cuadrícula CSS de Angry Tools

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.

1. Generador de cuadrícula CSS

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:

  • La interfaz es fácil de usar y los colores están bien elegidos, lo que convierte a CSS Grid Generator en una excelente herramienta para los principiantes que desean familiarizarse más con las cuadrículas CSS.
  • CSS Grid Generator puede ayudarlo a obtener el resultado que desea para la mayoría de los casos de uso porque puede especificar la cantidad de columnas, filas y espacios en sus cuadrículas
  • Simplemente presione un botón para obtener una vista previa del código y copiarlo en su portapapeles

Contras:

  • No hay una plantilla que pueda elegir para ahorrarle tiempo
  • No podrás generar diseños complicados

2. Generador de diseño CSS

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í:

Ventajas:

  • CSS Layout Generator le permite elegir entre seis plantillas estándar para comenzar más rápido
  • Hay muchas opciones para resolver casi todos los casos de uso
  • Puede cambiar entre cuadrículas y Flexbox, lo cual es útil para comparar ambas opciones
  • La interfaz es excelente y fácil de usar.

Contras:

  • Debido a que ofrece tantas opciones, CSS Layout Generator puede resultar confuso para un principiante.

3. Diseño de cuadrícula

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í:

Ventajas:

  • Grid Layout Es intuitivo de usar y ofrece muchas opciones
  • Puede configurar sus columnas y sus filas usando píxeles (px), fraccionarios (fr) y porcentajes (%)
  • Sus diseños se pueden exportar a CodePen, CodeSandbox o StackBlitz con un solo clic
  • La interfaz está bien diseñada, con un contraste adecuado entre las opciones y la vista previa de la cuadrícula.
  • Diseño de cuadrícula Admite opciones de ubicación de cuadrícula

Contras:

  • Este generador no proporciona plantillas para ahorrarle tiempo, que es la razón principal por la que lo puse tercero en la lista.

4. cuadrícula

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í:

Ventajas:

  • Puede configurar sus columnas y sus filas usando píxeles (px), fraccionarios (fr) y porcentajes (%)
  • Las opciones proporcionadas son suficientes para resolver la mayoría de los casos de uso y probar diferentes alineaciones. En pocas palabras, hace el trabajo

Contras:

  • Puede que sea una cuestión de gustos, pero la barra lateral con las opciones no es la mejor interfaz para mí. Tienes que desplazarte un rato para conseguir lo que buscas
  • No hay plantillas para elegir
  • no hay minmax()funcion

5. Cssgr.id

Cssgr.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í:

Ventajas:

  • Cssgr.id viene con cinco diseños de inicio prácticos para elegir (3 × 3, formación de fútbol, ​​encabezado/pie de página, galería y sitio web genérico)
  • Puede agregar texto de marcador de posición para ver cómo se representa con algún contenido escrito
  • Tiene una interfaz bien diseñada que se puede configurar fácilmente.

Contras:

  • No es el generador de grillas con más opciones

6. Cuadrícula CSS de Angry Tools

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í:

Ventajas:

  • Angry Tools CSS Grid viene con algunas plantillas entre las que puede elegir

Contras:

  • No tiene el mejor diseño en general. Para ser honesto, es bastante feo y puede ser difícil de usar.
  • No recomendaría esta herramienta para principiantes. Los desarrolladores avanzados probablemente también deberían elegir CSS Layout Generator o Grid LayoutIt en su lugar
  • Tienes que desplazarte para obtener los resultados de CSS

BONIFICACIÓN: hoja de trucos de cuadrícula CSS

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í:

gapEstablece el tamaño del espacio entre las filas y las columnas. Es una forma abreviada de las siguientes propiedades: row-gapycolumn-gap
row-gapEspecifica el espacio entre las filas de la cuadrícula.
column-gapEspecifica el espacio entre las columnas.
gridUna propiedad abreviada para: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns,grid-auto-flow
grid-areaEspecifica 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-columnsEstablece el tamaño de las columnas en un contenedor de cuadrícula.
grid-auto-flowControla cómo se insertan en la cuadrícula los elementos colocados automáticamente
grid-auto-rowsEstablece el tamaño de las filas en un contenedor de cuadrícula
grid-columnEspecifica 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-endDefine cuántas columnas abarcará un elemento o en qué línea de columna terminará el elemento
grid-column-gapDefine el tamaño del espacio entre las columnas en un diseño de cuadrícula
grid-column-startDefine en qué línea de columna comenzará el elemento
grid-gapDefine 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-rowEspecifica 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-endDefine cuántas filas abarcará un elemento o en qué línea de fila terminará el elemento
grid-row-gapDefine el tamaño del espacio entre las filas en un diseño de cuadrícula
grid-row-startDefine en qué línea de fila comenzará el artículo
grid-templateUna propiedad abreviada para las siguientes propiedades: grid-template-rows, grid-template-columns,grid-template-areas
grid-template-areasEspecifica áreas dentro del diseño de cuadrícula.
grid-template-columnsEspecifica el número (y el ancho) de las columnas en un diseño de cuadrícula
grid-template-rowsEspecifica 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/

#css 

伊藤  直子

伊藤 直子

1647732000

最高のCSSグリッドジェネレーターの比較

グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅

あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。

CSSグリッドジェネレーターとは何ですか?

グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか?私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。

この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。

  • CSSグリッドジェネレーター
  • CSSレイアウトジェネレーター
  • グリッドLayoutIt
  • グリディ
  • Cssgr.id
  • AngryToolsCSSグリッド

また、時間を節約するために、覚えておく必要のある重要なCSSグリッドプロパティを使用してチートシートを作成しました。🥳このチートシートは、この記事の下部にあります。

1.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グリッドジェネレーターは、グリッド全体の列、行、およびギャップの数を指定できるため、ほとんどのユースケースで必要な結果を得るのに役立ちます。
  • ボタンを1つ押すだけで、コードをプレビューしてクリップボードにコピーできます

短所:

  • 時間を節約するために選択できるテンプレートはありません
  • 複雑なレイアウトを生成することはできません

2.CSSレイアウトジェネレーター

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>

サイドバーオプションは次のようになります。

長所:

  • CSS Layout Generatorを使用すると、6つの標準テンプレートから選択してより早く開始できます
  • ほぼすべてのユースケースを解決するための多くのオプションがあります
  • グリッドとFlexboxを切り替えることができます。これは、両方のオプションを比較するのに役立ちます
  • インターフェースは素晴らしく、ユーザーフレンドリーです

短所:

  • それは非常に多くのオプションを提供するので、CSSレイアウトジェネレータは初心者にとって混乱する可能性があります

3.グリッドLayoutIt

グリッドレイアウトこれは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>

結果のレイアウトは次のようになります。

長所:

  • グリッドレイアウト直感的に使用でき、多くのオプションを提供します
  • ピクセル(px)、フラクショナル(fr)、およびパーセンテージ(%)を使用して、列と行を設定できます。
  • レイアウトは、ワンクリックでCodePen、CodeSandbox、またはStackBlitzにエクスポートできます
  • インターフェースは適切に設計されており、オプションとグリッドプレビューの間に適切なコントラストがあります。
  • グリッドレイアウトグリッド配置オプションをサポート

短所:

  • このジェネレーターは、時間を節約するためのテンプレートを提供していません。これが、リストの3番目に配置した主な理由です。

4.グリディ

私の過去の経験では、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
}

結果のレイアウトは次のようになります。

長所:

  • ピクセル(px)、フラクショナル(fr)、およびパーセンテージ(%)を使用して、列と行を設定できます。
  • 提供されているオプションは、ほとんどのユースケースを解決し、さまざまな配置をテストするのに十分です。一言で言えば、それは仕事を成し遂げます

短所:

  • 好みの問題かもしれませんが、オプション付きのサイドバーは私にとって最適なインターフェイスではありません。探しているものを取得するには、しばらくスクロールする必要があります
  • 選択できるテンプレートはありません
  • minmax()機能はありません

5. Cssgr.id

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>

ギャラリーは次のようになりました。

長所:

  • Cssgr.idには、5つの実用的なスターターレイアウト(3×3、サッカーフォーメーション、ヘッダー/フッター、ギャラリー、および一般的なWebサイト)から選択できます。
  • プレースホルダーテキストを追加して、書かれたコンテンツでどのようにレンダリングされるかを確認できます
  • 簡単に設定できる適切に設計されたインターフェイスを備えています

短所:

  • ほとんどのオプションを備えたグリッドジェネレータではありません

6. AngryToolsCSSグリッド

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>

結果のギャラリーは次のようになります。

長所:

  • Angry Tools CSS Gridには、選択可能ないくつかのテンプレートが付属しています

短所:

  • 全体的に最高のデザインではありません。正直なところ、それはかなり醜く、使いにくいことがあります
  • 初心者にはお勧めしません。上級開発者は、おそらく代わりにCSSLayoutGeneratorまたはGridLayoutItのいずれかを選択する必要があります
  • CSS出力を取得するにはスクロールする必要があります

ボーナス:CSSグリッドチートシート

CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。

😇それがあなたを助けることができるなら、これが私が自分のために作ったものです:

gap行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gapcolumn-gap
row-gapグリッド行間のギャップを指定します
column-gap列間のギャップを指定します
gridgrid-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-startgrid-column-end
grid-column-endアイテムがまたがる列の数、またはアイテムが終了する列行を定義します
grid-column-gapグリッドレイアウトの列間のギャップのサイズを定義します
grid-column-startアイテムが開始する列行を定義します
grid-gapグリッドレイアウトの行と列の間のギャップのサイズを定義し、次のプロパティの省略形のプロパティです。grid-row-gapgrid-column-gap
grid-rowグリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-row-startgrid-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/

#css 

Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Duong Tran

Duong Tran

1646796864

Sắp Xếp Danh Sách Trong Python Với Python.sort ()

Trong bài viết này, bạn sẽ học cách sử dụng phương pháp danh sách của Python sort().

Bạn cũng sẽ tìm hiểu một cách khác để thực hiện sắp xếp trong Python bằng cách sử dụng sorted()hàm để bạn có thể thấy nó khác với nó như thế nào sort().

Cuối cùng, bạn sẽ biết những điều cơ bản về sắp xếp danh sách bằng Python và biết cách tùy chỉnh việc sắp xếp để phù hợp với nhu cầu của bạn.

Phương pháp sort() - Tổng quan về cú pháp

Phương pháp sort() này là một trong những cách bạn có thể sắp xếp danh sách trong Python.

Khi sử dụng sort(), bạn sắp xếp một danh sách tại chỗ . Điều này có nghĩa là danh sách ban đầu được sửa đổi trực tiếp. Cụ thể, thứ tự ban đầu của các phần tử bị thay đổi.

Cú pháp chung cho phương thức sort() này trông giống như sau:

list_name.sort(reverse=..., key=... )

Hãy chia nhỏ nó:

  • list_name là tên của danh sách bạn đang làm việc.
  • sort()là một trong những phương pháp danh sách của Python để sắp xếp và thay đổi danh sách. Nó sắp xếp các phần tử danh sách theo thứ tự tăng dần hoặc giảm dần .
  • sort()chấp nhận hai tham số tùy chọn .
  • reverse là tham số tùy chọn đầu tiên. Nó chỉ định liệu danh sách sẽ được sắp xếp theo thứ tự tăng dần hay giảm dần. Nó nhận một giá trị Boolean, nghĩa là giá trị đó là True hoặc False. Giá trị mặc định là False , nghĩa là danh sách được sắp xếp theo thứ tự tăng dần. Đặt nó thành True sẽ sắp xếp danh sách ngược lại, theo thứ tự giảm dần.
  • key là tham số tùy chọn thứ hai. Nó có một hàm hoặc phương pháp được sử dụng để chỉ định bất kỳ tiêu chí sắp xếp chi tiết nào mà bạn có thể có.

Phương sort()thức trả về None, có nghĩa là không có giá trị trả về vì nó chỉ sửa đổi danh sách ban đầu. Nó không trả về một danh sách mới.

Cách sắp xếp các mục trong danh sách theo thứ tự tăng dần bằng phương pháp sort()

Như đã đề cập trước đó, theo mặc định, sort()sắp xếp các mục trong danh sách theo thứ tự tăng dần.

Thứ tự tăng dần (hoặc tăng dần) có nghĩa là các mặt hàng được sắp xếp từ giá trị thấp nhất đến cao nhất.

Giá trị thấp nhất ở bên trái và giá trị cao nhất ở bên phải.

Cú pháp chung để thực hiện việc này sẽ giống như sau:

list_name.sort()

Hãy xem ví dụ sau đây cho thấy cách sắp xếp danh sách các số nguyên:

# a list of numbers
my_numbers = [10, 8, 3, 22, 33, 7, 11, 100, 54]

#sort list in-place in ascending order
my_numbers.sort()

#print modified list
print(my_numbers)

#output

#[3, 7, 8, 10, 11, 22, 33, 54, 100]

Trong ví dụ trên, các số được sắp xếp từ nhỏ nhất đến lớn nhất.

Bạn cũng có thể đạt được điều tương tự khi làm việc với danh sách các chuỗi:

# a list of strings
programming_languages = ["Python", "Swift","Java", "C++", "Go", "Rust"]

#sort list in-place in alphabetical order
programming_languages.sort()

#print modified list
print(programming_languages)

#output

#['C++', 'Go', 'Java', 'Python', 'Rust', 'Swift']

Trong trường hợp này, mỗi chuỗi có trong danh sách được sắp xếp theo thứ tự không tuân theo.

Như bạn đã thấy trong cả hai ví dụ, danh sách ban đầu đã được thay đổi trực tiếp.

Cách sắp xếp các mục trong danh sách theo thứ tự giảm dần bằng phương pháp sort()

Thứ tự giảm dần (hoặc giảm dần) ngược lại với thứ tự tăng dần - các phần tử được sắp xếp từ giá trị cao nhất đến thấp nhất.

Để sắp xếp các mục trong danh sách theo thứ tự giảm dần, bạn cần sử dụng reverse tham số tùy chọn với phương thức sort() và đặt giá trị của nó thành True.

Cú pháp chung để thực hiện việc này sẽ giống như sau:

list_name.sort(reverse=True)

Hãy sử dụng lại cùng một ví dụ từ phần trước, nhưng lần này làm cho nó để các số được sắp xếp theo thứ tự ngược lại:

# a list of numbers
my_numbers = [10, 8, 3, 22, 33, 7, 11, 100, 54]

#sort list in-place in descending order
my_numbers.sort(reverse=True)

#print modified list
print(my_numbers)

#output

#[100, 54, 33, 22, 11, 10, 8, 7, 3]

Bây giờ tất cả các số được sắp xếp ngược lại, với giá trị lớn nhất ở bên tay trái và giá trị nhỏ nhất ở bên phải.

Bạn cũng có thể đạt được điều tương tự khi làm việc với danh sách các chuỗi.

# a list of strings
programming_languages = ["Python", "Swift","Java", "C++", "Go", "Rust"]

#sort list in-place in  reverse alphabetical order
programming_languages.sort(reverse=True)

#print modified list
print(programming_languages)

#output

#['Swift', 'Rust', 'Python', 'Java', 'Go', 'C++']

Các mục danh sách hiện được sắp xếp theo thứ tự bảng chữ cái ngược lại.

Cách sắp xếp các mục trong danh sách bằng cách sử dụng key tham số với phương thức sort()

Bạn có thể sử dụng key tham số để thực hiện các thao tác sắp xếp tùy chỉnh hơn.

Giá trị được gán cho key tham số cần phải là thứ có thể gọi được.

Callable là thứ có thể được gọi, có nghĩa là nó có thể được gọi và tham chiếu.

Một số ví dụ về các đối tượng có thể gọi là các phương thức và hàm.

Phương thức hoặc hàm được gán cho key này sẽ được áp dụng cho tất cả các phần tử trong danh sách trước khi bất kỳ quá trình sắp xếp nào xảy ra và sẽ chỉ định logic cho tiêu chí sắp xếp.

Giả sử bạn muốn sắp xếp danh sách các chuỗi dựa trên độ dài của chúng.

Đối với điều đó, bạn chỉ định len()hàm tích hợp cho key tham số.

Hàm len()sẽ đếm độ dài của từng phần tử được lưu trong danh sách bằng cách đếm các ký tự có trong phần tử đó.

programming_languages = ["Python", "Swift","Java", "C++", "Go", "Rust"]

programming_languages.sort(key=len)

print(programming_languages)

#output

#['Go', 'C++', 'Java', 'Rust', 'Swift', 'Python']

Trong ví dụ trên, các chuỗi được sắp xếp theo thứ tự tăng dần mặc định, nhưng lần này việc sắp xếp xảy ra dựa trên độ dài của chúng.

Chuỗi ngắn nhất ở bên trái và dài nhất ở bên phải.

Các keyreverse tham số cũng có thể được kết hợp.

Ví dụ: bạn có thể sắp xếp các mục trong danh sách dựa trên độ dài của chúng nhưng theo thứ tự giảm dần.

programming_languages = ["Python", "Swift","Java", "C++", "Go", "Rust"]

programming_languages.sort(key=len, reverse=True)

print(programming_languages)

#output

#['Python', 'Swift', 'Java', 'Rust', 'C++', 'Go']

Trong ví dụ trên, các chuỗi đi từ dài nhất đến ngắn nhất.

Một điều cần lưu ý nữa là bạn có thể tạo một chức năng sắp xếp tùy chỉnh của riêng mình, để tạo các tiêu chí sắp xếp rõ ràng hơn.

Ví dụ: bạn có thể tạo một hàm cụ thể và sau đó sắp xếp danh sách theo giá trị trả về của hàm đó.

Giả sử bạn có một danh sách các từ điển với các ngôn ngữ lập trình và năm mà mỗi ngôn ngữ lập trình được tạo ra.

programming_languages = [{'language':'Python','year':1991},
{'language':'Swift','year':2014},
{'language':'Java', 'year':1995},
{'language':'C++','year':1985},
{'language':'Go','year':2007},
{'language':'Rust','year':2010},
]

Bạn có thể xác định một hàm tùy chỉnh nhận giá trị của một khóa cụ thể từ từ điển.

💡 Hãy nhớ rằng khóa từ điển và key tham số sort()chấp nhận là hai thứ khác nhau!

Cụ thể, hàm sẽ lấy và trả về giá trị của year khóa trong danh sách từ điển, chỉ định năm mà mọi ngôn ngữ trong từ điển được tạo.

Giá trị trả về sau đó sẽ được áp dụng làm tiêu chí sắp xếp cho danh sách.

programming_languages = [{'language':'Python','year':1991},
{'language':'Swift','year':2014},
{'language':'Java', 'year':1995},
{'language':'C++','year':1985},
{'language':'Go','year':2007},
{'language':'Rust','year':2010},
]

def get_year(element):
    return element['year']

Sau đó, bạn có thể sắp xếp theo giá trị trả về của hàm bạn đã tạo trước đó bằng cách gán nó cho key tham số và sắp xếp theo thứ tự thời gian tăng dần mặc định:

programming_languages = [{'language':'Python','year':1991},
{'language':'Swift','year':2014},
{'language':'Java', 'year':1995},
{'language':'C++','year':1985},
{'language':'Go','year':2007},
{'language':'Rust','year':2010},
]

def get_year(element):
    return element['year']

programming_languages.sort(key=get_year)

print(programming_languages)

Đầu ra:

[{'language': 'C++', 'year': 1985}, {'language': 'Python', 'year': 1991}, {'language': 'Java', 'year': 1995}, {'language': 'Go', 'year': 2007}, {'language': 'Rust', 'year': 2010}, {'language': 'Swift', 'year': 2014}]

Nếu bạn muốn sắp xếp từ ngôn ngữ được tạo gần đây nhất đến ngôn ngữ cũ nhất hoặc theo thứ tự giảm dần, thì bạn sử dụng reverse=Truetham số:

programming_languages = [{'language':'Python','year':1991},
{'language':'Swift','year':2014},
{'language':'Java', 'year':1995},
{'language':'C++','year':1985},
{'language':'Go','year':2007},
{'language':'Rust','year':2010},
]

def get_year(element):
    return element['year']

programming_languages.sort(key=get_year, reverse=True)

print(programming_languages)

Đầu ra:

[{'language': 'Swift', 'year': 2014}, {'language': 'Rust', 'year': 2010}, {'language': 'Go', 'year': 2007}, {'language': 'Java', 'year': 1995}, {'language': 'Python', 'year': 1991}, {'language': 'C++', 'year': 1985}]

Để đạt được kết quả chính xác, bạn có thể tạo một hàm lambda.

Thay vì sử dụng hàm tùy chỉnh thông thường mà bạn đã xác định bằng def từ khóa, bạn có thể:

  • tạo một biểu thức ngắn gọn một dòng,
  • và không xác định tên hàm như bạn đã làm với def hàm. Các hàm lambda còn được gọi là các hàm ẩn danh .
programming_languages = [{'language':'Python','year':1991},
{'language':'Swift','year':2014},
{'language':'Java', 'year':1995},
{'language':'C++','year':1985},
{'language':'Go','year':2007},
{'language':'Rust','year':2010},
]

programming_languages.sort(key=lambda element: element['year'])

print(programming_languages)

Hàm lambda được chỉ định với dòng key=lambda element: element['year']sắp xếp các ngôn ngữ lập trình này từ cũ nhất đến mới nhất.

Sự khác biệt giữa sort()sorted()

Phương sort()thức hoạt động theo cách tương tự như sorted()hàm.

Cú pháp chung của sorted()hàm trông như sau:

sorted(list_name,reverse=...,key=...)

Hãy chia nhỏ nó:

  • sorted()là một hàm tích hợp chấp nhận một có thể lặp lại. Sau đó, nó sắp xếp nó theo thứ tự tăng dần hoặc giảm dần.
  • sorted()chấp nhận ba tham số. Một tham số là bắt buộc và hai tham số còn lại là tùy chọn.
  • list_name là tham số bắt buộc . Trong trường hợp này, tham số là danh sách, nhưng sorted()chấp nhận bất kỳ đối tượng có thể lặp lại nào khác.
  • sorted()cũng chấp nhận các tham số tùy chọn reversekey, đó là các tham số tùy chọn tương tự mà phương thức sort() chấp nhận.

Sự khác biệt chính giữa sort()sorted()sorted()hàm nhận một danh sách và trả về một bản sao được sắp xếp mới của nó.

Bản sao mới chứa các phần tử của danh sách ban đầu theo thứ tự được sắp xếp.

Các phần tử trong danh sách ban đầu không bị ảnh hưởng và không thay đổi.

Vì vậy, để tóm tắt sự khác biệt:

  • Phương sort()thức không có giá trị trả về và trực tiếp sửa đổi danh sách ban đầu, thay đổi thứ tự của các phần tử chứa trong nó.
  • Mặt khác, sorted()hàm có giá trị trả về, là một bản sao đã được sắp xếp của danh sách ban đầu. Bản sao đó chứa các mục danh sách của danh sách ban đầu theo thứ tự được sắp xếp. Cuối cùng, danh sách ban đầu vẫn còn nguyên vẹn.

Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

#original list of numbers
my_numbers = [10, 8, 3, 22, 33, 7, 11, 100, 54]

#sort original list in default ascending order
my_numbers_sorted = sorted(my_numbers)

#print original list
print(my_numbers)

#print the copy of the original list that was created
print(my_numbers_sorted)

#output

#[10, 8, 3, 22, 33, 7, 11, 100, 54]
#[3, 7, 8, 10, 11, 22, 33, 54, 100]

Vì không có đối số bổ sung nào được cung cấp sorted(), nó đã sắp xếp bản sao của danh sách ban đầu theo thứ tự tăng dần mặc định, từ giá trị nhỏ nhất đến giá trị lớn nhất.

Và khi in danh sách ban đầu, bạn thấy rằng nó vẫn được giữ nguyên và các mục có thứ tự ban đầu.

Như bạn đã thấy trong ví dụ trên, bản sao của danh sách đã được gán cho một biến mới my_numbers_sorted,.

Một cái gì đó như vậy không thể được thực hiện với sort().

Hãy xem ví dụ sau để xem điều gì sẽ xảy ra nếu điều đó được thực hiện với phương thức sort().

my_numbers = [10, 8, 3, 22, 33, 7, 11, 100, 54]

my_numbers_sorted = my_numbers.sort()

print(my_numbers)
print(my_numbers_sorted)

#output

#[3, 7, 8, 10, 11, 22, 33, 54, 100]
#None

Bạn thấy rằng giá trị trả về của sort()None.

Cuối cùng, một điều khác cần lưu ý là các reversekey tham số mà sorted()hàm chấp nhận hoạt động giống hệt như cách chúng thực hiện với phương thức sort() bạn đã thấy trong các phần trước.

Khi nào sử dụng sort()sorted()

Dưới đây là một số điều bạn có thể muốn xem xét khi quyết định có nên sử dụng sort()vs. sorted()

Trước tiên, hãy xem xét loại dữ liệu bạn đang làm việc:

  • Nếu bạn đang làm việc nghiêm ngặt với một danh sách ngay từ đầu, thì bạn sẽ cần phải sử dụng sort()phương pháp này vì sort()chỉ được gọi trong danh sách.
  • Mặt khác, nếu bạn muốn linh hoạt hơn và chưa làm việc với danh sách, thì bạn có thể sử dụng sorted(). Hàm sorted()chấp nhận và sắp xếp mọi thứ có thể lặp lại (như từ điển, bộ giá trị và bộ) chứ không chỉ danh sách.

Tiếp theo, một điều khác cần xem xét là liệu bạn có giữ được thứ tự ban đầu của danh sách mà bạn đang làm việc hay không:

  • Khi gọi sort(), danh sách ban đầu sẽ bị thay đổi và mất thứ tự ban đầu. Bạn sẽ không thể truy xuất vị trí ban đầu của các phần tử danh sách. Sử dụng sort()khi bạn chắc chắn muốn thay đổi danh sách đang làm việc và chắc chắn rằng bạn không muốn giữ lại thứ tự đã có.
  • Mặt khác, sorted()nó hữu ích khi bạn muốn tạo một danh sách mới nhưng bạn vẫn muốn giữ lại danh sách bạn đang làm việc. Hàm sorted()sẽ tạo một danh sách được sắp xếp mới với các phần tử danh sách được sắp xếp theo thứ tự mong muốn.

Cuối cùng, một điều khác mà bạn có thể muốn xem xét khi làm việc với các tập dữ liệu lớn hơn, đó là hiệu quả về thời gian và bộ nhớ:

  • Phương sort()pháp này chiếm dụng và tiêu tốn ít bộ nhớ hơn vì nó chỉ sắp xếp danh sách tại chỗ và không tạo ra danh sách mới không cần thiết mà bạn không cần. Vì lý do tương tự, nó cũng nhanh hơn một chút vì nó không tạo ra một bản sao. Điều này có thể hữu ích khi bạn đang làm việc với danh sách lớn hơn chứa nhiều phần tử hơn.

Phần kết luận

Và bạn có nó rồi đấy! Bây giờ bạn đã biết cách sắp xếp một danh sách trong Python bằng sort()phương pháp này.

Bạn cũng đã xem xét sự khác biệt chính giữa sắp xếp danh sách bằng cách sử dụng sort()sorted().

Tôi hy vọng bạn thấy bài viết này hữu ích.

Để tìm hiểu thêm về ngôn ngữ lập trình Python, hãy xem Chứng chỉ Máy tính Khoa học với Python của freeCodeCamp .

Bạn sẽ bắt đầu từ những điều cơ bản và học theo cách tương tác và thân thiện với người mới bắt đầu. Bạn cũng sẽ xây dựng năm dự án vào cuối để áp dụng vào thực tế và giúp củng cố những gì bạn đã học được.

Nguồn: https://www.freecodecamp.org/news/python-sort-how-to-sort-a-list-in-python/

#python