I need to style a contact form 7 form for a customer and i tried to style it within a grid to place the buttons properly and Chrome flat out refuses to display the element as grid. It doesn't even show the purple grid borders around the element. Event though display: grid is active. No Problem in Firefox & Safari. Each child element gets assigned to a grid area.
.fieldset-cf7mls.cf7mls_current_fs[data-cf7mls-order="3"] {
display: grid;
grid-template-columns: 100px auto;
grid-auto-rows: auto;
gap: 10px;
grid-template-areas:
"title title"
"q1 q1"
"q2 q2"
"q3 q3"
"q4 q4"
"q5 q5"
"button button";
}
And the HTML:
<fieldset class="fieldset-cf7mls cf7mls_current_fs" data-cf7mls-order="3">
<h6 id="prod_last_title">Wie können wir Sie erreichen?</h6>
<span class="wpcf7-form-control-wrap text-252"><input type="text" name="text-252" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required prod_text prod_input" id="text_1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<span class="wpcf7-form-control-wrap text-253"><input type="text" name="text-253" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required prod_text prod_input" id="text_2" aria-required="true" aria-invalid="false" placeholder="Firma"></span>
<span class="wpcf7-form-control-wrap tel-588"><input type="tel" name="tel-588" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel prod_text prod_input" id="tel_1" aria-invalid="false" placeholder="Telefonnummer"></span>
<span class="wpcf7-form-control-wrap email-566"><input type="email" name="email-566" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email prod_text prod_input" id="mail_1" aria-required="true" aria-invalid="false" placeholder="E-Mail"></span>
<span class="wpcf7-form-control-wrap textarea-291"><textarea name="textarea-291" cols="40" rows="2" class="wpcf7-form-control wpcf7-textarea prod_text" id="textfield_2" aria-invalid="false" placeholder="Kommentare"></textarea></span>
<span id="wpcf7-5e9dbc817edd4" class="wpcf7-form-control-wrap Website-wrap" style="display:none !important; visibility:hidden !important;"><label class="hp-message">Bitte lasse dieses Feld leer.</label><input class="wpcf7-form-control wpcf7-text" type="text" name="Website" value="" size="40" tabindex="-1" autocomplete="nope"></span>
<input type="submit" value="Senden" class="wpcf7-form-control wpcf7-submit" id="prod_submit">
<span class="ajax-loader"></span>
<input type="button" value="Zurück" style="" class="cf7mls_back action-button" name="cf7mls_back">
</fieldset>
