Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

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

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Contin煤a con el Curso de Dise帽o Web con CSS Grid y Flexbox

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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

17/28
Recursos

Aportes 52

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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: 鈥溌緾贸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?

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>
  • 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 鈥渃uate鈥 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?

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.

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

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 馃ぃ馃ぃ馃ぃ

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

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

Esta clase la tendr茅 que ver hasta aburrirme鈥

Todo el curso lleva enunciando conceptos que dice que 鈥榣uego vamos a ver en profunidad鈥. No se revisan y s铆 lo dejan a uno muy perdido.

DIFERENCIA ENTRE BLOCK Y INLINE

Display: BLOCK

_

Display: INLINE

_

Display: INLINE-BLOCK

_

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!

Display, define el tipo de visualizaci贸n de un elemento. Tiene dos valores Inner y Outer.

Display viene del verbo: Desplegar, colocar a la vista, exhibir, lucir, mostrar, presentar.

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 鈥減able鈥.

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鈥攁 memorable night, as it was to prove鈥攈undreds 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 鈥渂loque鈥. 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 鈥渕谩s grandes鈥 que los elementos en l铆nea.
.
Para mas Informaci贸n - Fuente :developer.mozilla.org 馃槂