Creando nuestro contenedor: ¿display: grid o display: inline-grid?

Algunas diferencias entre elementos inline y block.

Les dejo el artículo de donde saqué la información: https://www.psdahtmlpasoapaso.com/blog/los-elementos-block-y-elementos-inline-fundamental/

Ohhhh ahora comprendooooo, yo siempre le tenía miedo a usar inline-grid o cosas así porque pensaba: “¿Cómo que dos tipos de display? No, no, no, yo no voy a usar esta cosa porque quién sabe qué cosa rara hará con mi diseño, yo ahí lo dejo”, ahora todo tiene sentido…
.
Por cierto, la principal diferencia que yo veo entre inline y block es que inline va a tomar el ancho de sus hijos, es decir, es como si el contenedor se desinflara y acabara midiendo lo mismo que miden los contenedores hijos, en cambio, los block son como un contanador completamente inflado que se extiende a más no poder 🤔.
.
Es por eso que cuando ponemos un botón después de haber puesto un input, ambos salen en la misma linea, porque su width se limita al tamaño de los hijos 🤔

🤔 ¿display: grid o display: inline-grid?

Display ⇒ Desplegar, colocar a la vista, exhibir, lucir, Mostar, presentar

Outer ⇒ Denota cómo se comporta un elemento en relación a los otros

Inner ⇒ como se comportan los hijos directos del elemento

• Display ⇒ Define el tipo de visualización de un elemento
  • Valores:
    • Inner
    • Outer
• Los valores block e inline definen dos cosas
  • Valor externo (Outer)
  • Valor interno (Inner)
• Cuando usamos display: grid; estamos diciendo display: block grid;
  • Es decir que su comportamiento externo sera de tipo bloque
• Un elemento que tenga los atributos de bloque puede tener:
  • Margin y padding
  • width
  • height
• Si pensamos en display: inline-flex; su relación con otros elementos no sera de bloque sino de línea
• Siempre volvemos al flujo normal del documento

RESUMEN: La diferencia entre grid e inline-grid es el comportamiento externo que tienen con otros elementos, usando grid sera de tipo bloque y usando inline-grid sera de tipo inline

Aquí una representación grafica de las diferencias.

Resumen de la ultima imagen:📓

Block se acapara todo el espacio como un😤 gandaya, no quiere a nadie a lado de el.

En cambio inline es bien “cuate” y pueden estar bien juntitos, cada quien con el espacio que ocupe.

Y cuando ambos están juntos, hay como un convenio en el cual ni se empujan, ni nada, simplemente toman su distancia, pero sobre la misma linea y si ocupan más, pues ocupan más espacio.🖖

PD: Te sirvio esta explicación?

Hay que tener en cuenta de que siempre vamos a volver al flujo normal del documento (bloque o linea) ya que en cada uno de las etiquetas html tienen por defecto estos elementos sin agregarle CSS por defecto. Esto es lo que se conoce como "flujo normal del documento". Por ejemplo

• Las elementos INLINE que se visualizan uno seguido de otro en la misma linea sin hacer salto de linea son:

  a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

• Los elementos BLOQUE que se comportan como bloques y que cada vez que se presenta un elemento de este tipo se hace un salto de linea son:

  address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

• Sin embargo, los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del, iframe, ins, map, object, script

Los elementos inline se caracterizan por no aceptar propiedades como top, left, right, bottom, y su tamaño width y height se definen por su contenido.

Los elementos block al contrario de inline, si podemos darle las propiedades top, left right, bottom y el width toma todo el ancho disponible de su padre.

https://wizardzines.com/comics/inline-vs-block/
https://dev.to/shimphillip/inline-vs-inline-block-vs-block-280h

Esta clase la tendré que ver hasta aburrirme…

Estuvo super interesante la clase, no tenia ni idea que se podía tener inline-flex y inline-grid

A los elementos inline no podemos darle propiedades de width ni heigth no se si alguna otra.

Increible curso por parte de Estefany, esta clase me hizo click en mi mente respecto a CSS y este tema, un monton de cosas que no entendia cuando no me agarra el ancho o alto a algunos elementos y empezaba a tenerle asco al lindo CSS 🤣🤣🤣

Todo el curso lleva enunciando conceptos que dice que ‘luego vamos a ver en profunidad’. No se revisan y sí lo dejan a uno muy perdido.

Los valores block e inline definen dos cosas: externo o outer, significa que denota como se comporta un elemento en relación a los otros y también el valor interno de como se comportan sus hijos directos de ese elemento.

Al momento de crear nuestro contenedor, debemos de tener presente, si vamos a trabajar con un Display:Grid o con un elemento Display:inline-grid. Casi siempre se utiliza display:Grid pero hay que tener en cuenta en que casos se puede utilizar el inline-grid.

Cuando se trabaja con el display, estamos trabajando con la forma de visualizacion o de colocacion que hay en cada elemento padre. Sabemos que los contenedores de tipo Block y Grid se comportan de la misma forma. Pero que son estos valores? Los valores block e inline nos definen dos cosas:

• Valor Externo de Visualizacion:

Es como se comporta un elemento en relacion a los otros

• Valor Interno de Visualización:

Como se comportan los hijos directos de este elemento.

Entonces realmente cuando trabajamos en un Grid, estamos trabajando en un Block-Grid. Se comportara por fuera como un elemento bloque, pero por dentro como un Grid. Los elementos en bloque contienen los siguientes atributos:

• Margin & Padding
• Width & Height

Notas de la clase

Elementos contenedores

.

Cada elemento HTML tiene su propio display por defecto, dependiendo de su propio tipo. Tenemos dos tipos princiaples bloque e inline .

.
Elementos Block

Los elementos se colocan unos tras otros, verticalmente donde la distancia es respetada por sus propiedades margin .

Los elementos de este tipo, buscarán ocupar el width disponible.
.

Recurso @roremDev
.
Elementos Inline

Los elementos se colocan unos tras otros, horizontalmente, donde la distancia es respetada horizontalmente, buscando ocupar el width necesario.
A sy modelo caja es conocida como caja de línea.
.

Recurso @roremDev
.

💡Para ambos tipos de elementos, se poseen un contenedor comodín que no requieren de la definición atributos pero, comúnmente, utilizados con style , class e id.
.
El elemento div es un contenedor de otros elementos HTML definidos bajo un elemento de tipo bloque .

El elemento span es un contenedor usado para relacionar determinada parte de texto, definido bajo un elemento de tipo inline .

Un pantallazo de está clase que me pareció muy útil!

Waos, interesante que ya venga por defecto 😄, ayuda a simplificar las cosas en cierto sentido.

La diferencia entre display: grid y display: inline-grid es que display: grid crea una cuadrícula flexible que ocupa todo el ancho del contenedor, mientras que display: inline-grid crea una cuadrícula flexible que solo ocupa el espacio necesario para colocar sus elementos.

Los elementos BLOCK, ocupan el 100% del width de su contenedor, aun si su contenido no lo requiere, por eso se colocan en columna, uno debajo del otro. Se pueden modificar sus medidas de margin, padding, width y height.

Los elementos INLINE solo tienen el tamaño de su contenido, se colocan en fila uno al lado de otro. No se pueden modificar sus medidas de margin y padding, ni width ni height.

me volaste la cabeza!!! llevo mucho años ignorando esto, buena clase

Aporte:

Display: block grid;
```no es necesario agregar display en la sintaxis la palabra block porque se hereda directamente.

En Cambio display: inline-grid;
si es necesario agregarlo ya que modifica el valor interno de visualización de los hijos directos de un contenedor. 

Inline Vs Block

Inline se posiciona de manera horizontal, mientras que block de manera vertical.

El primero no permite modificar valores de altura, altura de linea, y margenes superior e inferior, pero si los margenes laterales.

Block es todo lo contrario.

ntenaré hacer un resumen según lo que entendí:

• Los elemenos **inline **no se les puede poner width ni height ni margin-top o bottom, el tamaño del contenedor será determinado por el tamaño del contenido

• Los elementos inline-block, tienen muchas similitudes con los elementos inline, hacen todo lo que los **inline **hacen, sin embargo a estos se les puede poner width, height y margin vertical, lo que quiere decir que es lo mejor de ambos mundos.

• Los elementos block, siempre van a iniciar en una linea nueva,y tomaran todo el ancho de su contenedor, no podemos posicionar otros elementos de html al lado de un elemento block, a estos elementos **block **se les puede poner width, height, y margin vertical.

Me gusto esta clase por que explica concepto que ni siquiera se me habían pasado por la cabeza hasta ahora el inline y block en grid y el flexbox es algo asombroso.

Cuando comenzamos a trabajar con grid, lo primero que hemos de realizar será declarar nuestro contenedor, esto se hace declarando su Display, pero veamos mejor que nos referimos con esto.

Display, es la forma en la que un elemento se muestra o despliega en una página, hay distintas formas en las que estos se pueden mostrar, pero estas cuentan con dos formas, el valor externo de visualización y el valor interno de visualización.

El valor externo nos indica cómo se comporta un elemento con relación a los otros elementos del diseño.

El Valor interno nos indica cómo se comportan los hijos directos de ese elemento.

Acá entonces entran los dos tipos de Display más importantes a conocer, Display Inline y Display block.

Display Inline: Estos elementos no influyen en el flujo del documento, lo que se traduce de forma mundana a que estos elementos no requieren espacio adicional más que el de su contenido, además ciertas de sus propiedades, como el ancho y alto de estos elementos no puede ser modificado.

Span, a, input, img, Label, son ejemplos de elementos en línea

Display block:

Estos elementos siempre empiezan en una nueva línea, ocupan todo el ancho posible de su contenedor padre y sus propiedades de alto y ancho pueden ser modificadas.

Div, p, h1, form, ul, son ejemplos de elementos block.

Ahora que tenemos un poco mas en claro la diferencia entre estos tipos de Display, para declarar nuestro contenedor grid tenemos dos opciones:

Display: grid el cual, aunque no lo tenga escrito de forma específica se comportara como un elemento block.

Display: Inline-grid: el cual se comportara como un elemento Inline.

• Block-level Elements
  A block-level element always starts on a new line.
  A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
  A block level element has a top and a bottom margin, whereas an inline element does not.

• Inline Elements
  An inline element does not start on a new line.
  An inline element only takes up as much width as necessary.
  This is a <span> element inside a paragraph.

Me acabo de dar cuenta de que a pesar de que el valor externo de display: grid;
se comporte como bloque el margin collapsing no lo afectará ya que esto solo funciona en display: block; de esta forma si nosotros necesitamos usar esta característica necesitamos encapsular ese contenedor en un display: block; 😙

Dejo una tabla que hice con las diferencias de Inline y Block 👨‍💻

Display: grid;
En realida es display: block grid;
Externamente se comporta como block
Internamente se comporta como grid
Puedes asignar Margin – padding – width - height propio

Display: inline-grid
Diferencia más notoria

• Se posicionan horizontalmente elementos en línea uno al lado del otro
• width - height se define con base en el contenido del elemento

FLUJO NORMAL DEL DOCUMENTO
Se refiere a los estilos que tienen por defecto cada elemento

No tenia idea del comportamiento externo e interno y no sabia que al usar grid o flex en realidad era como decir block grid o block flex. Me exploto la cabeza. 🤯🤯🤯

Interesante tema! Les comparto un post sobre lo que entendí de este tema. https://taniamaza.blog/css-grid/ 😃

Hola, cree un pequeño pen para ver como es en la vida real el comportamiento de Inline y block. Espero les pueda ayudar como a mi me ayudo a entender los conceptos y como funciona 😎
 
Ver ejemplo aqui

¡Excelente clase! Siempre tuve dudas con este tema. Esta clase me ayudó a entenderlo muchísimo mejor.

Inline

• Se refiere a interior por que ocupara todooo su contenido interior de los contenedores hijos.

Block

• Cuando hace referencia a exterior es por que ocupara todooo el contenido máximo que tendrá por ejemplo su “pable”.

…

por ejemplo :

Margin collapsing

La especificación explica que los márgenes entre los elementos del bloque colapsan.

.
💡Esto significa que si tiene un elemento con un margen superior inmediatamente después de un elemento con un margen inferior, en lugar de que el espacio total sea la suma de estos dos márgenes, el margen se colapsa y, por lo tanto, esencialmente será tan grande como el mayor de los márgenes. dos márgenes.
.
En el siguiente ejemplo, los párrafos tienen un margen superior de 20px y un margen inferior de 40px. El tamaño del margen entre los párrafos es 40px ya que el margen superior más pequeño del segundo párrafo se ha contraído con el margen inferior más grande del primero.
.

🔗 Referencia Block and inline layout in normal flow
.

p {
    border: 2px solid green;
    margin: 20px 0 40px 0;
}

<div class="box">
    <p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
    <p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
</div>

mmm ya entiendo

valor externo de visualización!

Ya me quedó mucho más clara la diferencia entre Block e Inline

inline: Elemento en línea , se coloca en horizontal (un elemento a continuación del otro).

block: Elemento en bloque, se coloca en vertical (un elemento encima de otro).

Buena clase. Antes veía en mi editor de código esas otras opciones de la propiedad display y no lograba entender como había algo que era: inline-block, inline-flex, inline-grid etc. Ahora me ha quedado bastante claro. Muy buena explicación.
.
Gracias.
😁

👌

INTERESANTE

Esta clase es reveladora =0 ya había buscado y nunca encontré la diferencia entre inline-grid y grid

Elementos en línea ⇒ Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea.
.
Elementos en bloque ⇒ Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un “bloque”. Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento.
.
<<Hay un par de diferencias clave entre los elementos en bloque y elementos en línea:>>
.
#De forma predeterminada, los elementos de bloque comienzan en una nueva línea, pero los elementos en línea pueden comenzar en cualquier parte de una línea.
.
#En general, los elementos en bloque pueden contener elementos en línea y otros elementos en bloque. Inherente a esta distinción estructural es la idea de que los elementos en bloque crean estructuras “más grandes” que los elementos en línea.
.
Para mas Información - Fuente :developer.mozilla.org 😃