Colunas Flex

Colunas dinamicas agrupadas.

by Leandro Simões

HTML

<div id="tile-container" class="tile-container">
	<div id="group1" class="tile-group">
		<span class="title">Grupo 1</span>
		<div class="tile-grid">
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
		</div>
	</div>
	
	<div id="group2" class="tile-group">
		<span class="title">Grupo 2</span>
		<div class="tile-grid">
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
			<div class="tile-item">
				<label class="tile-item-titulo">Test</label>
			</div>
			
		</div>
	</div>


</div>

CSS

html,body{
		margin:0;padding:0px
	}
	*{
		height: 100%;
	}
	.tile-container {
    display: flex; // Aqui deve ser display FLEX para funcionar
}

.tile-group {
    height: 100%;
    display: inline-block;
    margin-left: 3px;
    position: relative;
    flex-grow: 1; // Faz com que a coluna cresça junto com o conteúdo
}

.tile-group .title {
    color: #626262;
    font-size: 24px;
    font-weight: 400;
    position: absolute;
    left: 4px;
}
.tile-grid {
    margin-top: 46px;
    height: calc(100% - 46px);
    position:relative;
    border: 0px solid black;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
}

.tile-item {
    width: 122px;
    height: 122px;
    position: relative;
    display: block;
    float: left;
    margin: 3px;
    box-shadow: inset 0 0 1px #FFFFCC;
    cursor: pointer;
    overflow: hidden;
}

#group1 .tile-item {
	background-color:red;
}

#group2 .tile-item {
	background-color:blue;
}