Creating Items in REST API| POST Request| Consuming a REST API in Flutter #5

In this video I show you how to create resources in a REST API. Here we use the POST method to create the note that we want. I show you how to encode a Dart object to an actual JSON string, and i also do some explaining on Content types such as application/json

►SOURCE CODE◄
https://tinyurl.com/wpjzm73

►THE API USED IN THIS VIDEO◄
http://api.notes.programmingaddict.com/swagger/index.html

#rest api #flutter

What is GEEK

Buddha Community

Creating Items in REST API| POST Request| Consuming a REST API in Flutter #5

Easter Deckow

1655630160

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Install via pip:

$ pip install pytumblr

Install from source:

$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py install

Usage

Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
    '<consumer_key>',
    '<consumer_secret>',
    '<oauth_token>',
    '<oauth_secret>',
)

client.info() # Grabs the current user information

Two easy ways to get your credentials to are:

The built-in interactive_console.py tool (if you already have a consumer key & secret)
The Tumblr API console at https://api.tumblr.com/console
Get sample login code at https://api.tumblr.com/console/calls/user/info

Supported Methods

User Methods

client.info() # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('codingjester.tumblr.com') # follow a blog
client.unfollow('codingjester.tumblr.com') # unfollow a blog

client.like(id, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

state - a string, the state of the post. Supported types are published, draft, queue, private
tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
date - a string, the customized GMT that you want
format - a string, the format that your post is in. Support types are html or markdown
slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],
                    source="https://68.media.tumblr.com/b965fbb2e501610a29d80ffb6fb3e1ad/tumblr_n55vdeTse11rn1906o1_500.jpg")

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",
                    data="/Users/johnb/path/to/my/image.jpg")

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

title - a string, the title of post that you want. Supports HTML entities.
url - a string, the url that you want to create a link post for.
description - a string, the desciption of the link that you have

#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="https://duckduckgo.com",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
"""
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="https://soundcloud.com/skrillex/sets/recess")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",
                    embed="http://www.youtube.com/watch?v=40pUYLacrj4")

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/blah.mov")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python interactive-console.py

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python setup.py test

Author: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license

#python #api

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

`gap`	Establece el tamaño del espacio entre las filas y las columnas. Es una forma abreviada de las siguientes propiedades: `row-gap`y`column-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/

#css

Adolphus Tillman

1647702841

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:

`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/

#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-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/

#css

Destiny Volkman

1597014000

Google's Flutter 1.20 stable announced with new features - Navoki

Flutter Google cross-platform UI framework has released a new version 1.20 stable.

Flutter is Google’s UI framework to make apps for Android, iOS, Web, Windows, Mac, Linux, and Fuchsia OS. Since the last 2 years, the flutter Framework has already achieved popularity among mobile developers to develop Android and iOS apps. In the last few releases, Flutter also added the support of making web applications and desktop applications.

Last month they introduced the support of the Linux desktop app that can be distributed through Canonical Snap Store(Snapcraft), this enables the developers to publish there Linux desktop app for their users and publish on Snap Store. If you want to learn how to Publish Flutter Desktop app in Snap Store that here is the tutorial.

Flutter 1.20 Framework is built on Google’s made Dart programming language that is a cross-platform language providing native performance, new UI widgets, and other more features for the developer usage.

Here are the few key points of this release:

Performance improvements for Flutter and Dart

In this release, they have got multiple performance improvements in the Dart language itself. A new improvement is to reduce the app size in the release versions of the app. Another performance improvement is to reduce junk in the display of app animation by using the warm-up phase.

sksl_warm-up

If your app is junk information during the first run then the Skia Shading Language shader provides for pre-compilation as part of your app’s build. This can speed it up by more than 2x.

Added a better support of mouse cursors for web and desktop flutter app,. Now many widgets will show cursor on top of them or you can specify the type of supported cursor you want.

Autofill for mobile text fields

Autofill was already supported in native applications now its been added to the Flutter SDK. Now prefilled information stored by your OS can be used for autofill in the application. This feature will be available soon on the flutter web.

flutter_autofill

A new widget for interaction

InteractiveViewer is a new widget design for common interactions in your app like pan, zoom drag and drop for resizing the widget. Informations on this you can check more on this API documentation where you can try this widget on the DartPad. In this release, drag-drop has more features added like you can know precisely where the drop happened and get the position.

Updated Material Slider, RangeSlider, TimePicker, and DatePicker

In this new release, there are many pre-existing widgets that were updated to match the latest material guidelines, these updates include better interaction with Slider and RangeSlider, DatePicker with support for date range and time picker with the new style.

flutter_DatePicker

New `pubspec.yaml` format

Other than these widget updates there is some update within the project also like in pubspec.yaml file format. If you are a flutter plugin publisher then your old pubspec.yaml is no longer supported to publish a plugin as the older format does not specify for which platform plugin you are making. All existing plugin will continue to work with flutter apps but you should make a plugin update as soon as possible.

Preview of embedded Dart DevTools in Visual Studio Code

Visual Studio code flutter extension got an update in this release. You get a preview of new features where you can analyze that Dev tools in your coding workspace. Enable this feature in your vs code by _dart.previewEmbeddedDevTools_setting. Dart DevTools menu you can choose your favorite page embed on your code workspace.

Network tracking

The updated the Dev tools comes with the network page that enables network profiling. You can track the timings and other information like status and content type of your** network calls** within your app. You can also monitor gRPC traffic.

Generate type-safe platform channels for platform interop

Pigeon is a command-line tool that will generate types of safe platform channels without adding additional dependencies. With this instead of manually matching method strings on platform channel and serializing arguments, you can invoke native class and pass nonprimitive data objects by directly calling the Dartmethod.

There is still a long list of updates in the new version of Flutter 1.2 that we cannot cover in this blog. You can get more details you can visit the official site to know more. Also, you can subscribe to the Navoki newsletter to get updates on these features and upcoming new updates and lessons. In upcoming new versions, we might see more new features and improvements.

You can get more free Flutter tutorials you can follow these courses:

#dart #developers #flutter #app developed #dart devtools in visual studio code #firebase local emulator suite in flutter #flutter autofill #flutter date picker #flutter desktop linux app build and publish on snapcraft store #flutter pigeon #flutter range slider #flutter slider #flutter time picker #flutter tutorial #flutter widget #google flutter #linux #navoki #pubspec format #setup flutter desktop on windows

Creating Items in REST API| POST Request| Consuming a REST API in Flutter #5

What is GEEK

Buddha Community

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Usage

Create a client

Supported Methods

User Methods

Blog Methods

Post Methods

Tagged Methods

Using the interactive console

Running tests

Comparando Los Mejores Generadores De Grid CSS

¿Qué son los generadores de grid CSS?

1. Generador de cuadrícula CSS

2. Generador de diseño CSS

Ventajas:

Contras:

3. Diseño de cuadrícula

Ventajas:

Contras:

4. cuadrícula

Ventajas:

Contras:

5. Cssgr.id

Ventajas:

Contras:

6. Cuadrícula CSS de Angry Tools

Ventajas:

Contras:

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

Comparing the best CSS grid generators

What are CSS grid generators?

1. CSS Grid Generator

2. CSS Layout Generator

Pros:

Cons:

3. Grid LayoutIt

Pros:

Cons:

4. Griddy

Pros:

Cons:

5. Cssgr.id

Pros:

Cons:

6. Angry Tools CSS Grid

Pros:

Cons:

BONUS: CSS grid cheat sheet

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

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

1.CSSグリッドジェネレーター

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

長所：

短所：

3.グリッドLayoutIt

長所：

短所：

4.グリディ

長所：

短所：

5. Cssgr.id

長所：

短所：

6. AngryToolsCSSグリッド

長所：

短所：

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

Google's Flutter 1.20 stable announced with new features - Navoki

Performance improvements for Flutter and Dart

Autofill for mobile text fields

Updated Material Slider, RangeSlider, TimePicker, and DatePicker

New pubspec.yaml format

Preview of embedded Dart DevTools in Visual Studio Code

Network tracking

Generate type-safe platform channels for platform interop

New `pubspec.yaml` format